vue3?tailwindcss的使用教程
Tailwind CSS
Tailwind是由Adam Wathan領(lǐng)導(dǎo)的TailwindLabs開發(fā)的 CSS 框架。
實(shí)用類
Tailwind 附帶了大量實(shí)用類。將它們組合起來并調(diào)整樣式是使用 Tailwind 進(jìn)行樣式設(shè)置的一大特點(diǎn)。實(shí)用類以相當(dāng)小的單元準(zhǔn)備，因此大多數(shù)樣式都可以通過僅組合實(shí)用類來實(shí)現(xiàn)。
| Tailwind 實(shí)用類 | 用 CSS 寫 |
|---|---|
| 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) |
有這么多的類，你可能會(huì)認(rèn)為很難記住這些類，但正如你在上面看到的，text-red-50 Tailwind 的實(shí)用類名稱是這樣命名的，這樣你就可以很容易地想象要應(yīng)用的樣式。
vue3 tailwindcss的使用
首先安裝依賴：
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)類名了。
VScode 安裝插件 Tailwind CSS IntelliSense 會(huì)有代碼提示
到此這篇關(guān)于vue3 tailwindcss的使用的文章就介紹到這了,更多相關(guān)vue3 tailwindcss使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue模仿ElementUI的form表單實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue模仿ElementUI的form表單的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示
這篇文章主要為大家介紹了vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
electron-vite工具打包后如何通過內(nèi)置配置文件動(dòng)態(tài)修改接口地址
使用electron-vite?工具開發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下2024-05-05
vue3.0中使用Element-Plus中Select下的filter-method屬性代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0中使用Element-Plus中Select下的filter-method屬性的相關(guān)資料,Filter-method用法是指從一組數(shù)據(jù)中選擇滿足條件的項(xiàng),文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue實(shí)現(xiàn)鼠標(biāo)移過出現(xiàn)下拉二級(jí)菜單功能
這篇文章主要介紹了vue實(shí)現(xiàn)鼠標(biāo)移過出現(xiàn)下拉二級(jí)菜單功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了在Vue中使用防抖與節(jié)流,及this指向的問題,具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
vue開發(fā)中數(shù)據(jù)更新但視圖不刷新的解決方法
在開發(fā)中我們處理數(shù)據(jù)時(shí)會(huì)遇到數(shù)據(jù)更新了,但視圖并沒有更新,這種情況往往是數(shù)據(jù)嵌套層數(shù)過多導(dǎo)致的問題,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)中數(shù)據(jù)更新但視圖不刷新的解決方法,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了微信小程序使用uni-app一鍵獲取用戶信息,需要的朋友可以參考下2023-01-01
vue輸入框使用模糊搜索功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue輸入框使用模糊搜索功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
vue項(xiàng)目打包發(fā)布后接口報(bào)405錯(cuò)誤的解決
這篇文章主要介紹了vue項(xiàng)目打包發(fā)布后接口報(bào)405錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07