vue3?tailwindcss的使用教程

更新時(shí)間：2023年08月22日 14:12:53 作者：逆風(fēng)優(yōu)雅

Tailwind是由Adam Wathan領(lǐng)導(dǎo)的TailwindLabs開(kāi)發(fā)的 CSS 框架，這篇文章主要介紹了vue3?tailwindcss的使用,需要的朋友可以參考下

Tailwind CSS

Tailwind是由Adam Wathan領(lǐng)導(dǎo)的TailwindLabs開(kāi)發(fā)的 CSS 框架。

實(shí)用類(lèi)

Tailwind 附帶了大量實(shí)用類(lèi)。將它們組合起來(lái)并調(diào)整樣式是使用 Tailwind 進(jìn)行樣式設(shè)置的一大特點(diǎn)。實(shí)用類(lèi)以相當(dāng)小的單元準(zhǔn)備，因此大多數(shù)樣式都可以通過(guò)僅組合實(shí)用類(lèi)來(lái)實(shí)現(xiàn)。

Tailwind 實(shí)用類(lèi)	用 CSS 寫(xiě)
text-red-50	color: rgb(254 226 226)
text-red-100	color: rgb(254 202 202)
text-red-200	color: rgb(252 165 165)
text-red-300	color: rgb(254 226 226)
text-red-400	color: rgb(248 113 113)
text-red-500	color: rgb(239 68 68)
text-red-600	color: rgb(220 38 38)
text-red-700	color: rgb(185 28 28)
text-red-800	color: rgb(153 27 27)
text-red-900	color: rgb(127 29 29)

有這么多的類(lèi)，你可能會(huì)認(rèn)為很難記住這些類(lèi)，但正如你在上面看到的，text-red-50 Tailwind 的實(shí)用類(lèi)名稱(chēng)是這樣命名的，這樣你就可以很容易地想象要應(yīng)用的樣式。

vue3 tailwindcss的使用

首先安裝依賴(lài)：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm i -D unocss

然后vite.config.ts中引入

 
import Unocss from 'unocss/vite'
export default defineConfig({
    plugins: [
        Unocss(),
    ],
})

終端執(zhí)行：

npx tailwindcss init -p

會(huì)在項(xiàng)目根目錄下面生成兩個(gè)文件

tailwind.config.js

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

postcss.config.js

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

完成以上步驟就可以在標(biāo)簽中直接使用 tailwind 提供的相關(guān)類(lèi)名了。

VScode 安裝插件 Tailwind CSS IntelliSense 會(huì)有代碼提示

到此這篇關(guān)于vue3 tailwindcss的使用的文章就介紹到這了,更多相關(guān)vue3 tailwindcss使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

使用VUE實(shí)現(xiàn)在table中文字信息超過(guò)5個(gè)隱藏鼠標(biāo)移到時(shí)彈窗顯示全部
這篇文章主要介紹了使用VUE實(shí)現(xiàn)在table中文字信息超過(guò)5個(gè)隱藏，鼠標(biāo)移到時(shí)彈窗顯示全部,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
使用vue-router與v-if實(shí)現(xiàn)tab切換遇到的問(wèn)題及解決方法
這篇文章主要介紹了vue-router與v-if實(shí)現(xiàn)tab切換的思考,需要的朋友可以參考下
2018-09-09
Vue項(xiàng)目配置在局域網(wǎng)下訪(fǎng)問(wèn)方式
這篇文章主要介紹了Vue項(xiàng)目配置在局域網(wǎng)下訪(fǎng)問(wèn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue項(xiàng)目中Eslint校驗(yàn)代碼報(bào)錯(cuò)的解決方案
這篇文章主要介紹了vue項(xiàng)目中Eslint校驗(yàn)代碼報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue3父子組件傳參有關(guān)sync修飾符的用法詳解
這篇文章主要給大家介紹關(guān)于前端Vue3父子組件傳參有關(guān)sync修飾符的用法詳細(xì)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2021-09-09
vue3.0實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼(組件)及校驗(yàn)
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼(組件)及校驗(yàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
Vue3?中自定義插件的實(shí)現(xiàn)方法
在 Vue 中，一些簡(jiǎn)單的功能，我們可以直接定義為全局方法，然后掛到 Vue 上就能使用了，這篇文章主要介紹了Vue3?中自定義插件的實(shí)現(xiàn),需要的朋友可以參考下
2022-08-08
vue使用動(dòng)態(tài)組件手寫(xiě)Router View實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue使用動(dòng)態(tài)組件手寫(xiě)RouterView實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼
這篇文章主要介紹了Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
Vue實(shí)現(xiàn)聊天界面
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)聊天界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06