咨询行业,湛江做网站seo,网费一年多少钱,网站关键词seo推广公司哪家好公众号关注 “太空编程”设为 “星标”#xff0c;带你了解硬核的编程知识#xff01;众所周知#xff0c;Tailwind CSS框架越来越流行#xff0c;所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模板#xff0c;一方面自己深入学习下#xff0c;二来帮助新人更快地… 公众号关注 “太空编程”设为 “星标”带你了解硬核的编程知识
众所周知Tailwind CSS框架越来越流行所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模板一方面自己深入学习下二来帮助新人更快地上手Tailwind CSS开发。创建一个React项目通过使用create-react-app命令创建一个新的React项目npx create-react-app cra-tailwind-template
cd cra-tailwind-template
如果没有安装过create-react-app包会先安装包输入yes直接安装这样就成功创建了一个React项目模板并进入到项目根目录安装Tailwind CSS通过以下命令执行安装npm install tailwindcssnpm:tailwindcss/postcss7-compat tailwindcss/postcss7-compat postcss^7 autoprefixer^9
配置CracoCraco是一个为你创建的React项目而使用的简易的配置成层。通过在应用程序的根目录中添加craco.config.js文件即可给eslintbabelpostcss等添加自定义配置这样可以统一集中化管理所有的配置。npm install craco/craco
安装好之后编辑项目中package.json文件scripts部分scripts: {start: craco start,build: craco build,test: craco test,eject: react-scripts eject
},
接下来我们需要在项目根目录手动创建一个craco.config.js文件并且添加tailwind和autoprefix作为PostCSS插件module.exports {style: {postcss: {plugins: [require(tailwindcss),require(autoprefixer),],},},
}
创建配置文件接着正式在项目中引入tailwind CSS框架通过以下命令创建tailwind.config.js文件npx tailwind init
创建好的文件位于项目的根目录下编辑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命令来使用tailwind base;
tailwind components;
tailwind utilities;
最后将index.css引入到你的src/index.js文件中import React from react;
import ReactDOM from react-dom;
import ./index.css; // include index.css
import App from ./App;
import reportWebVitals from ./reportWebVitals;ReactDOM.render(React.StrictModeApp //React.StrictMode,document.getElementById(root)
);
到此所有的配置结束了我们可以在模板或页面文件中使用Tailwind CSS代码了。
