安装tailwind

tailwindcss通过 npm安装，并创建你的tailwind.config.js 文件。 Vite创建的项目默认集成了PostCSS，而TailwindCSS本身就是一个PostCSS插件，所以直接使用即可。

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init

配置

tailwind.config.js配置

将路径添加到文件中的所有模板文件tailwind.config.js。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js 配置

将tailwindcssand添加autoprefixer到您的文件，或者在项目中配置 PostCSS 的任何位置。 postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
}

vite.config.ts增加配置

import tailwindcss from  tailwindcss
import autoprefixer from 'autoprefixer


css: {
    postcss: {
      plugins: [
        tailwindcss, 
        autoprefixer,
      ]
    }
  }

引入Tailwind的基本指令

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;
复制代码

main.js

import './tailwind.css'

完成以上步骤即可开始使用

与elementUI button颜色冲突

tailwind中按钮颜色进行了默认操作，如下

button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

解决方式 1

禁止tailwind的默认，配置如下添加corePlugins对象，并设置preflight为false

修改文件 tailwind.config.js

module.exports = {
  ...
  ...
  corePlugins: {
    preflight: false
  }
}

解决方式2

只需在 Element Plus 组件之前导入 Tailwind css：

import './tailwind.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

TailwindCSS在vite项目中使用