vue3项目引入tailwindcss

vue3 vite tailwindcss@3 版本

初始化项目

npm create vite@latest  --template vue
cd vue
npm install
npm run dev

安装tailwindcss@3 和 postcss 引入

npm install -D tailwindcss@3  postcss autoprefixer 
// 初始化引用
npx tailwindcss init -p

以上配置后，会在根目录生成 postcss.config.js tailwind.config.js,src目录下创建index.css tailwind.css

postcss.config.js配置如下

export default {plugins: {tailwindcss: {},autoprefixer: {},},
}

tailwind.config.js配置如下

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

tailwind.css配置如下

styles文件夹之下

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

index.css配置如下

styles文件夹之下的index.css

@import url('tailwind.css');

main.ts引入 index.css

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 注意此处
import "./index.css"createApp(App).mount('#app')

自定义配置

tailwind.config.js配置如下

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {// 自定义宽度类width: {...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义高度类height: {...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义 padding 类padding: {...Array.from({ length: 150 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义 margin 类margin: {...Array.from({ length: 100 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义 font-size 类fontSize: {...Array.from({ length: 50 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})}},},plugins: [],
};

以上配置 我们将fontSize margin 等改为了固定宽度，此时安装 postcss-px-to-viewport可以进行适配

npm install postcss-px-to-viewport

postcss.config.js配置如下

export default {plugins: {tailwindcss: {},autoprefixer: {},"postcss-px-to-viewport": {unitToConvert: "px", // 要转化的单位viewportWidth: 750, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度，即小数点位数propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: [], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false// replace: true, // 是否转换后直接更换属性值exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配landscape: false // 是否处理横屏情况}},
}

vue3 vite tailwindcss@4 版本

初始化项目

npm create vite@latest  --template vue
cd vue
npm install
npm run dev

tailwindcss 4版本采用插件安装

npm install tailwindcss @tailwindcss/vite

vite.config.js配置如下

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite";// https://vite.dev/config/
export default defineConfig({plugins: [vue(), tailwindcss()],
});

一般在src文件夹下有一个styles文件夹，在其中的index.css中进行如下配置

@import "tailwindcss";

在main.js中或main.ts文件中引入上一个文件

import "./styles/index.css";

在app.vue文件中测试

<span class="flex text-red-400">tailwindcss4</span>

截至到这里已经可以在项目中使用tailwindcss

---

自定义样式（非必须）

styles 下 index.css

@import "tailwindcss";@config "../tailwind.config.js";

src根目录下 添加 tailwind.config.js 文件并配置以下内容

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {// 自定义宽度类width: {...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义高度类height: {...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义 padding 类padding: {...Array.from({ length: 150 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义 margin 类margin: {...Array.from({ length: 100 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义 font-size 类fontSize: {...Array.from({ length: 50 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})}},},plugins: [],
};