CSS | 我看谁还不用这个UI库

最近新开不少项目，又实在是不想自己去定义特别多的 css 公共样式了，毕竟人多不好维护。于是找到了这个 tailwindcss UI 库。主要是内置了很多常用的 css 样式，前期避免了大量时间去写 css，中间开发也不用专门去维护，方便的一批。

文档地址

推荐看英文原文档，因为他是最新的版本，而中文文档只是 2.2.16 的，英文文档早已在 3.1.6 了。

中文文档

英文文档

使用说明

在 vscode 中安装好tailwindcss的插件（tailwind CSS IntelliSense），他会提示你所有的样式，配合这个开发，畅享丝滑。
安装tailwindcss，点击这里可以去官网直接看安装流程。

1	npm install -D tailwindcss postcss autoprefixer

在项目中使用

// 1.创建postcss.config.ts文件
module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
  ]
}

// 2.创建tailwind.config.ts文件
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// 3.在main.ts中引入样式
import "tailwindcss/tailwind.css"

// 4.修改vite.config.ts文件
export default (mode, command) => {
   return defineConfig({
      css: {
        postcss: {
          plugins: [
            require("tailwindcss"),
            require("autoprefixer"),
          ]
        }
      }
   })
}

// 5.使用,和正常的class一样的使用方法
<p class='text-blue-400'>就是这样的用法啦</p>