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: [],
};