vue3-vite下tailwindcss安装与配置

初始化 Tailwind CSS

安装 Tailwind 以及其它依赖项:

pnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest
//或者
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

 

一、创建您的配置文件

接下来，生成您的 tailwind.config.js 和 postcss.config.js 文件：

pnpm dlx tailwindcss init -p
//或者
npx tailwindcss init -p

 

这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

 

这也将会创建一个包含已配置好的 tailwindcss 和 autoprefixer 的 postcss.config.js 配置文件：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

二、配置 Tailwind 来移除生产环境下没有使用到的样式声明

// tailwind.config.js
//V3版本
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}  

//V2版本
module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
}

 

三、在您的 CSS 中引入 Tailwind

创建 ./src/index.css 文件 并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，来替换掉原来的文件内容。

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

四、导入css文件

最后，确保您的 CSS 文件被导入到您的 ./src/main.js 文件中。

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

五、针对vite下必须配置

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [uni()],
  css: {
    postcss: {
      plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
      ]
    }
  }
});