Vue3集成Tailwind CSS

Tailwind CSS 是一个由js编写的CSS 框架 他是基于postCss 去解析的

官网地址：Tailwind CSS 中文文档

可以在vscode安装 Tailwind插件进行代码的输入提示

安装 Tailwind 以及其它依赖项

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

生成配置文件

具体配置内容可见： 配置文档

npx tailwindcss init -p

修改配置文件 tailwind.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // 生产优化，移除未使用的样式
  theme: {
    extend: {},
  },
  plugins: [],
}

创建 tailwind.css文件

@tailwind base;
@tailwind components;
@tailwind utilities;

main.ts中引入 tailwind.css文件

import './tailwindcss/tailwind.css'

如果您想基于 Tailwind 生成的默认样式自定义任何 CSS ，通常情况下只需创建一个 CSS 文件，并使用 @tailwind 指令包含 Tailwind 的 base，components 和 utilities 样式：

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-600 text-white rounded;
  }
}

运行即可

Tailwind UI