vue?tailwindcss安裝配置教程示例詳解
更新時(shí)間：2023年09月01日 09:59:00 作者：風(fēng)如也
這篇文章主要為大家介紹了vue?tailwindcss安裝配置教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
Tailwind CSS with Vue
創(chuàng)建Vue項(xiàng)目
npm create vite@latest my-project -- --template vue cd my-project
安裝Tailwind CSS
創(chuàng)建tailwind.config.js和postcss.config.js
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
配置tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}添加Tailwind指令到全局css文件中
此處文件地址比如在./src/style.css
@tailwind base; @tailwind components; @tailwind utilities;
在main.js入口引入style.css
import { createApp } from 'vue'
import './style.css'啟動(dòng)項(xiàng)目
npm run dev
在模板中使用tailwindcss
<template>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>可以看到頁(yè)面上此時(shí)已經(jīng)有效果了，具體使用教程可以查看官方文檔。
以上就是vue tailwindcss安裝配置教程示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue tailwindcss安裝配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue請(qǐng)求接口并且攜帶token的實(shí)現(xiàn)
本文主要介紹了vue請(qǐng)求接口并且攜帶token的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家介紹了Vue.js中安裝一個(gè)路由器demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
使用element-ui的Pagination分頁(yè)的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了使用element-ui的Pagination分頁(yè)的注意事項(xiàng)及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
下面小編就為大家分享一篇基于vue打包后字體和圖片資源失效問(wèn)題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue-cli腳手架-bulid下的配置文件,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了如何在Vue.JS中使用圖標(biāo)組件，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-08-08
vue點(diǎn)擊彈窗自動(dòng)觸發(fā)點(diǎn)擊事件的解決辦法(模擬場(chǎng)景)
本文通過(guò)案例場(chǎng)景給大家介紹vue點(diǎn)擊彈窗自動(dòng)觸發(fā)點(diǎn)擊事件的解決辦法，通過(guò)兩種方法給大家分享vue 自動(dòng)觸發(fā)點(diǎn)擊事件的處理方法，對(duì)vue自動(dòng)觸發(fā)點(diǎn)擊事件相關(guān)知識(shí)感興趣的朋友一起看看吧2021-05-05
vue中跨域以及sessionId不一致問(wèn)題及解決
這篇文章主要介紹了vue中跨域以及sessionId不一致問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
解決Vue router-link綁定事件不生效的問(wèn)題
這篇文章主要介紹了解決Vue router-link綁定事件不生效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue 使用lodash實(shí)現(xiàn)對(duì)象數(shù)組深拷貝操作
這篇文章主要介紹了vue 使用lodash實(shí)現(xiàn)對(duì)象數(shù)組深拷貝操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09