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的类名提示工具。

转载自掘金，稍后验证