在vue2?中使用?tailwindcss的方法?親測(cè)可用

更新時(shí)間：2022年07月09日 15:37:10 作者：張鑠洋

這篇文章主要介紹了在vue2?中使用?tailwindcss的方法?親測(cè)可用,本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1. 直接安裝

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2. 創(chuàng)建文件tailwindcss.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

3.main.js中引入

import "./assets/tailwindcss.css"

4.在項(xiàng)目根目錄執(zhí)行以下命令：

npx tailwindcss init -p

發(fā)現(xiàn)在根目錄下多了2個(gè)文件.

5. 測(cè)試一下

<p class="bg-blue-500">111111</p>

如果有背景顏色，那就說明可以使用

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

您可能感興趣的文章:

相關(guān)文章

vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問題
這篇文章主要介紹了vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue elementui el-table 表格里邊展示四分位圖效果(功能實(shí)現(xiàn))
這篇文章主要介紹了vue elementui el-table 表格里邊展示四分位圖效果(功能實(shí)現(xiàn)),本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-04-04
vue中$emit傳遞多個(gè)參(arguments和$event)
本文主要介紹了vue中$emit傳遞多個(gè)參(arguments和$event)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
vue項(xiàng)目中如何使用mock你知道嗎
這篇文章主要為大家介紹了vue項(xiàng)目如何使用mock，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
如何解決Vue請(qǐng)求接口出現(xiàn)跨域問題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請(qǐng)求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
elementUI多選框反選的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementUI多選框反選的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue3 emit is not a function問題及解決
這篇文章主要介紹了vue3 emit is not a function問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
Vue中的文字換行問題
這篇文章主要介紹了Vue中的文字換行問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue源碼makeMap函數(shù)深入分析
vue源碼中的makeMap用在很多地方，主要是判斷標(biāo)簽是原生標(biāo)簽還是用戶自定義的組件，但是標(biāo)簽很多，如果每判斷一次都執(zhí)行一次循環(huán)，累計(jì)下來，性能損耗還是很大的，makeMap就是解決這個(gè)問題出現(xiàn)的
2022-08-08
如何給element添加一個(gè)抽屜組件的方法步驟
這篇文章主要介紹了如何給element添加一個(gè)抽屜組件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07