快捷導(dǎo)航

vue3+vite配置tailwindcss全過程

更新時間：2025年06月12日 09:46:31 作者：不想起名55

這篇文章主要介紹了vue3+vite配置tailwindcss全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

安裝

npm install autoprefixer tailwindcss @uni-helper/vite-plugin-uni-tailwind -D

autoprefixer ：自動管理瀏覽器前綴的插件，可以解析css文件并且添加前綴到css內(nèi)容里。
@uni-helper/vite-plugin-uni-tailwind: 將 Tailwind CSS 框架集成到使用 Vite 作為構(gòu)建工具的 UniApp 項目中

我的版本

修改配置文件

tailwind.config.ts

module.exports = {
  content: ["index.html", "./src/**/*.{html,js,ts,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.ts

module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	}
}

vite.config.ts

import tailwindcss from "tailwindcss";
import uniTailwind from "@uni-helper/vite-plugin-uni-tailwind";
export default defineConfig({
  plugins: [uni(), uniTailwind()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});

引入tailwindcss 指令

在src目錄下新建assets目錄，新建tailwind.css 文件

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

在App.vue中引入

測試

<view class="bg-black text-orange-500">
	<text>1</text>
	<text>2</text>
</view>

總結(jié)

報錯的時候先去官網(wǎng)看案例，查博客版本依賴不一樣可能會被帶偏；

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中el-tree樹全部展開或收起的實現(xiàn)示例
本文主要介紹了Vue中el-tree樹全部展開或收起的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Vue3點擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件全過程(WEB)
寫頁面的時候都會用到一些導(dǎo)航欄、點擊不同的部分切換不同的頁面,下面這篇文章主要給大家介紹了關(guān)于Vue3點擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件的相關(guān)資料,需要的朋友可以參考下
2023-06-06
Vue-cli assets SubDirectory及PublicPath區(qū)別詳解
這篇文章主要介紹了Vue-cli assets SubDirectory及PublicPath區(qū)別詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-08-08
Vue.js實戰(zhàn)之組件之間的數(shù)據(jù)傳遞
這篇文章主要介紹了Vue.js實戰(zhàn)之組件之間的數(shù)據(jù)傳遞的相關(guān)資料，文中通過示例代碼和圖文介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-04-04
基于vue中css預(yù)加載使用sass的配置方式詳解
下面小編就為大家分享一篇基于vue中css預(yù)加載使用sass的配置方式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue.js每天必學(xué)之組件與組件間的通信
Vue.js每天必學(xué)之組件與組件間的通信,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
vue查找指令和模板思路詳解
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點是一個元素還是一個文本，隨著思路的展開我們就來實現(xiàn)這個功能，需要的朋友可以參考下
2023-10-10
vue 項目引入echarts 添加點擊事件操作
這篇文章主要介紹了vue 項目引入echarts 添加點擊事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
VUE3?Vite打包后動態(tài)圖片資源不顯示問題解決方法
這篇文章主要給大家介紹了關(guān)于VUE3?Vite打包后動態(tài)圖片資源不顯示問題的解決方法,可能是因為在部署后的服務(wù)器環(huán)境中對中文文件名的支持不完善,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-09-09
Vue3 異步組件 suspense使用詳解
vue在解析我們的組件時，是通過打包成一個 js 文件，當(dāng)我們的一個組件引入過多子組件是，頁面的首屏加載時間由最后一個組件決定優(yōu)化的一種方式就是采用異步組件，這篇文章主要介紹了Vue3 異步組件 suspense,需要的朋友可以參考下
2022-12-12