vite+react+tailwindcss的简单使用

1. 使用vite创建react项目

yarn create vite my-react-app --template react

2. 添加tailwind.css相关依赖

• 2.1 添加tailwindcss postcss autoprefixer依赖

yarn add [email protected] [email protected] [email protected]

• 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项目中成功的引入并使用。