Vite安装React TS Tailwind项目
安装Vite
npm install vite@latest
或者
yarn create vite
## Vite安装React项目+TS
安装完 vite 之后，我们就可以使用 vite 来创建项目了，vite 为我们提供了很多模版，我们只需要选择我们需要的就可以了。我们可以在创建项目的时候在命令当中指定对应的模版。
```sh
# npm 安装
npm create vite@latest my-vue-app -- --template vue
# yarn安装
yarn create vite my-vue-app --template vue
--template vue是指定创建vue框架的模版，我们这个项目使用的是react + ts的技术栈，因此我们执行下面这条命令
npm create vite@latest my-react-app -- --template react-ts
- 命令执行完之后，我们就获得了一个配置好的react + ts的项目。
配置 tailwind css
- 我们首先从通过包管理工具安装tailwindcss，执行下面的命令
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
因为tailwind不会自动添加浏览器引擎的前缀到生成的 CSS 当中，所以我们还需要同时安装autoprefixer@latest来解决这个问题。
都安装完之后，我们需要将 tailwind 作为 PostCSS 的插件来进行使用，也就是说，我们需要在 PostCSS 当中进行tailwind和autoprefixer的注册。
首先我们在项目的根目录下创建postcss.config.js文件，或者你也可以创建.postcssrc或者你也可以在package.json文件中的postcss键中来配置。
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
- 接下来我们需要在项目当中初始化tailwind，执行如下命令：
npx tailwindcss init
- 执行完之后，会在项目的根目录下生成一个tailwind.config.js文件。
// tailwind.config.js
module.exports = {
purge: [], //如果你安装的是tailwind v3 以上的版本，这里应该换成content
darkMode: false, // or 'media' or 'class'
//这里可以对tailwind的类名进行扩展
theme: {
extend: {
colors: {
//将 colors 类名替换为你的颜色
primary: "#ff0000",
},
zIndex: {
//在zindex当中添加你的自定义类名z-1
"-1": "-1",
},
},
},
variants: {},
plugins: [],
};
- 最后，我们需要在在根目录下创建一个tailwind.css文件，将tailwind引入项目当中。
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
最后，我们在main.tsx当中把tailwind进行引入就可以了。现在我们已经全局配置好了tailwind，接下来我们可以在页面当中使用了。具体的使用方法可以参考tailwindcss的文档。tailwind css 中文网
我们还可以在编辑器当中安装一些插件来更好的使用tailwind,比如Tailwind CSS IntelliSense这是一个tailwind的类名提示工具。
