在vue2?中使用?tailwindcss的方法?親測可用
更新時間：2022年07月09日 15:37:10 作者：張鑠洋
這篇文章主要介紹了在vue2?中使用?tailwindcss的方法?親測可用,本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
注意 : 我用我走過的坑告訴你們 ， 一定要按照步驟，一步一步來
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.在項目根目錄執(zhí)行以下命令：
npx tailwindcss init -p
發(fā)現(xiàn)在根目錄下多了2個文件.
5. 測試一下
<p class="bg-blue-500">111111</p>
如果有背景顏色， 那就說明可以使用
到此這篇關于在vue2 中使用 tailwindcss的方法 親測可用的文章就介紹到這了,更多相關vue2使用tailwindcss內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue中watch、computed、updated三者的區(qū)別及用法
這篇文章主要介紹了Vue中watch、computed、updated三者的區(qū)別及用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
html-webpack-plugin修改頁面的title的方法
這篇文章主要介紹了html-webpack-plugin修改頁面的title的方法 ，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要給大家介紹了關于Vue手動埋點設計的相關資料,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,需要的朋友可以參考下2022-03-03
vue?el-table實現(xiàn)動態(tài)添加行和列具體代碼
最近遇到一個動態(tài)增加行和列的需求,所以這里給大家總結下,這篇文章主要給大家介紹了關于vue?el-table實現(xiàn)動態(tài)添加行和列的相關資料,需要的朋友可以參考下2023-09-09
vue頁面引入three.js實現(xiàn)3d動畫場景操作
這篇文章主要介紹了vue頁面引入three.js實現(xiàn)3d動畫場景操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue接入ts基本方法，關于ts，也出了很久，下面我們就來簡單學習了下ts并且在原有項目上接入基本ts語法，也算是一個初級嘗試，簡單梳理下基礎的接入配置和已經(jīng)遇到的問題，供需要的小伙伴們參考2022-01-01
本文主要介紹了深入理解vue3中的reactive()，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
本篇文章主要介紹了vue之數(shù)據(jù)交互實例代碼，vue中也存在像ajax和jsonp的數(shù)據(jù)交互，實現(xiàn)向服務器獲取數(shù)據(jù)，有興趣的可以了解一下2017-06-06
這篇文章主要為大家詳細介紹了Vue3編寫氣泡對話框組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
本篇文章給大家介紹了vue項目中API接口管理的相關知識點，以及相關JS代碼分析，有興趣的朋友參考下。2018-04-04