vite+react+tailwindcss的简单使用方式
作者：药酱
这篇文章主要介绍了vite+react+tailwindcss的简单使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1. 使用vite创建react项目
yarn create vite my-react-app --template react
2. 添加tailwind.css相关依赖
- 2.1 添加tailwindcss postcss autoprefixer依赖
yarn add tailwindcss@latest postcss@latest autoprefixer@latest
- 2.2 使用命令
npx tailwindcss init，在根目录创建tailwind.config.js文件，并写入相关配置：
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
- 2.3 创建
tailwind.css文件，引入样式文件，写入配置，并在App.js引入：
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
- 2.4 根目录创建
postcss.config.js文件，并写入相关配置：
module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer")
],
};
3. 简单使用，展示效果
- 3.1 测试代码：
<button className="bg-red-500 hover:bg-blue-700"> Hover me </button>
- 3.2 效果展示：
从展示效果可见:tailwindcss在vite创建的react项目中成功的引入并使用。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。