Vue2中使用tailwindCss的詳細(xì)教程
更新時間：2024年09月27日 09:20:39 作者：Bubluu
Tailwind CSS是一個流行的前端CSS框架,它基于原子設(shè)計原則,提供了一套預(yù)構(gòu)建的CSS樣式類,旨在幫助開發(fā)者快速地創(chuàng)建響應(yīng)式、可定制的用戶界面,本文給大家介紹了Vue2中使用tailwindCss的詳細(xì)教程,需要的朋友可以參考下
一、tailwindCss
1、先看官方文檔：
2、先安裝：npm install -D tailwindcss
---------------通過 npm 安裝 tailwindcss，然后創(chuàng)建你自己的 create your tailwind.config.js 配置文件。
npm install -D tailwindcss
3、初始化文件—npx tailwindcss init
npx tailwindcss init
4、創(chuàng)建tailwindcss文件
在 assets 文件夾下創(chuàng)建 tailwendcss.css文件
@tailwind base; @tailwind components; @tailwind utilities;
5、在main.js中引入
import '@/assets/tailwindcss.css'
二、解決問題方案
1.使用px代替默認(rèn)的rem單位
在tailwind.config.js文件中，將配置修改為以下內(nèi)容
module.exports = {
purge: {
enabled: false,
content: ['./src/**/*.{js,jsx,ts,tsx}'],
},
content: [],
theme: {
spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {
map[index] = `${index}px`;
return map;
}, {}),
extend: {},
},
plugins: [],
};
2.vue2中由于版本問題 需要降低版本
由于最新的tailwind css使用post css 8版本，vue2框架暫時還不支持，所以需要指定安裝postcss7的版本
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
3.vue2要在vue.config.js中配置
css: {
loaderOptions: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
標(biāo)題然后重新運行即可—快來試試吧！
<div class="flex justify-center">flex居中</div> <div class="container mx-auto px-4">container mx-auto px-4</div>
到此這篇關(guān)于Vue2中使用tailwindCss的詳細(xì)教程的文章就介紹到這了,更多相關(guān)Vue2中使用tailwindCss內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
面試官常問的題之說一下Vue中setup的props和context
setup是一個組件選項,在組件被創(chuàng)建之前,props被解析之后執(zhí)行,這篇文章主要介紹了Vue中setup的props和context的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-04-04
在?Web?應(yīng)用程序中,有時需要為某些內(nèi)容提供全屏顯示的功能,本文將介紹如何使用?Vue.js?3?的?Composition?API?創(chuàng)建一個全屏功能的工具類,希望對大家有所幫助2024-03-03
vue-calendar-component 封裝多日期選擇組件的實例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
本文主要介紹了vue中添加語音播報功能的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)購物車的基本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
name 屬性是可選的,不寫它似乎也“沒問題”,但其實它在某些場景中非常重要,下面我們來詳細(xì)說明它的作用和典型用法,感興趣的朋友跟隨小編一起看看吧2025-05-05
Vue項目中如何實現(xiàn)表格選中數(shù)據(jù)的Excel導(dǎo)出
這篇文章主要為大家詳細(xì)介紹了Vue項目中如何實現(xiàn)表格選中數(shù)據(jù)的Excel導(dǎo)出功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2025-10-10
Vue異步更新DOM及$nextTick執(zhí)行機制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機制解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue中調(diào)用百度地圖獲取經(jīng)緯度的實現(xiàn)
最近做個項目，需要實現(xiàn)獲取當(dāng)前位置的經(jīng)緯度，所以本文主要介紹了vue中調(diào)用百度地圖獲取經(jīng)緯度的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了詳解vue嵌套路由-query傳遞參數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05