vite + react + tailwind 快速构建响应式项目
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 4 天，点击查看活动详情
vite 是由 vue 团队开发的一款新型打包工具，在打包速度方面相比于webpack和Rollup等传统打包工具有了很大的提升，同时在编译速度上也有了很大的提升。这也是为什么vite一经发布就成为前端领域热门的话题之一。
在构建项目方面，vite自身对vue提供了完美的支持，并且提供了一系列的插件来扩展功能。在对其他的框架支持上，比如react、sevlte等都提供了模版预设和插件，这也让vite迅速在前端圈子里面占据一定的地位。
vite 构建 react 项目
使用 vite 构建项目，我们首先要通过包管理工具来安装vite
- 使用 npm
$ npm install vite@latest
- 使用 yarn
$ yarn create vite
- 使用 pnpm
$ pnpm create vite
安装完 vite 之后，我们就可以使用 vite 来创建项目了，vite 为我们提供了很多模版，我们只需要选择我们需要的就可以了。我们可以在创建项目的时候在命令当中指定对应的模版。
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm 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的类名提示工具。
