公众号关注“太空编程”
设为 “星标”,带你了解硬核的编程知识!
众所周知,Tailwind CSS框架越来越流行,所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模板,一方面自己深入学习下,二来帮助新人更快地上手Tailwind CSS开发。
创建一个React项目
通过使用create-react-app
命令创建一个新的React项目
npxcreate-react-appcra-tailwind-templatecdcra-tailwind-template
如果没有安装过create-react-app
包,会先安装包,输入yes
直接安装
这样就成功创建了一个React项目模板,并进入到项目根目录
安装Tailwind CSS
通过以下命令执行安装
npminstalltailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compatpostcss@^7autoprefixer@^9
配置Craco
Craco是一个为你创建的React项目而使用的简易的配置成层。
通过在应用程序的根目录中添加craco.config.js文件,即可给eslint,babel,postcss等添加自定义配置,这样可以统一集中化管理所有的配置。
npminstall@craco/craco
安装好之后,编辑项目中package.json文件scripts
部分
"scripts":{"start":"cracostart","build":"cracobuild","test":"cracotest","eject":"react-scriptseject"},
接下来,我们需要在项目根目录手动创建一个craco.config.js文件,并且添加tailwind和autoprefix作为PostCSS插件
module.exports={style:{postcss:{plugins:[require('tailwindcss'),require('autoprefixer'),],},},}
创建配置文件
接着正式在项目中引入tailwind CSS框架,通过以下命令创建tailwind.config.js文件
npxtailwindinit
创建好的文件位于项目的根目录下
编辑tailwind.config.js文件
下面,我们需要对tailwind.config.js文件进行编辑,将配置里purge
项根据模板的路径,这样避免没有使用到的样式编译进生产环境的代码中
module.exports={purge:['./src/**/*.{js,jsx,ts,tsx}','./public/index.html'],darkMode:false,theme:{extend:{},},variants:{extend:{},},plugins:[],}
将Tailwind引入到CSS中
打开src/index.css
文件,使用@tailwind命令来使用
@tailwindbase;@tailwindcomponents;@tailwindutilities;
最后将index.css
引入到你的src/index.js
文件中
importReactfrom'react';importReactDOMfrom'react-dom';import'./index.css';//includeindex.cssimportAppfrom'./App';importreportWebVitalsfrom'./reportWebVitals';ReactDOM.render(<React.StrictMode><App/></React.StrictMode>,document.getElementById('root'));
到此,所有的配置结束了,我们可以在模板或页面文件中使用Tailwind CSS代码了。