【uniapp】vue3+vite模版的uniapp引入tailwindcss_uniapp vue3/vite版

直接填上午的坑，引入tailwindcss

根据官网提供的文档

有两种方式引入

• Tailwind CLI：引入后需要使用Tailwind CLI构建
• postcss：使用postcss、autoprefixer自动使用并转译

我按照官网的文档使用postcss方式引入，不起作用，那是因为vite.config.js没有配置。

一、安装依赖

npm install -D tailwindcss autoprefixer
npx tailwindcss init
1
2

二、修改配置文件

第二步我们就不创建postcss配置文件了。直接进行官网的第三步，第一步的时候已经创建了tailwind.config.js，修改里面的一些配置就行了。
extend可以自定义自己需要的格式。对于公司，这里面慢慢的就生成了对应的开发UI规范。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],// 根据自己需要增删改
  theme: {
    extend: {},
  },
  plugins: [],
}
1
2
3
4
5
6
7
8

三、引入tailwindcss 指令

添加这些到你的主css文件里面，官网是这样的。

@tailwind base;
@tailwind components;
@tailwind utilities;
1
2
3

我则是放在了App.vue里面

四、配置vite.config.js

为什么不需要再装postcss呢？
Vite自身已经集成PostCSS，无需再次安装。另外也无需单独创建PostCSS配置文件，已集成到vite.config.js的css选项中。可直接配置css.postcss选项即可。Vite将自动在*.vue文件中所有的style标签以及所有导入的.css文件中应用PostCSS.

import tailwindcss from "tailwindcss";

export default defineConfig({
 // ...其他一些配置
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
    // ...其他一些配置
  },
});
1
2
3
4
5
6
7
8
9
10
11

忽然想起来这些是不是也可以加入到我的小工具里面去，一键生成，方便我自己使用，嘿嘿，以后慢慢完善。