vue?tailwindcss安裝配置教程示例詳解
更新時間：2023年09月01日 09:59:00 作者：風(fēng)如也
這篇文章主要為大家介紹了vue?tailwindcss安裝配置教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
Tailwind CSS with Vue
創(chuàng)建Vue項目
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'啟動項目
npm run dev
在模板中使用tailwindcss
<template>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>可以看到頁面上此時已經(jīng)有效果了，具體使用教程可以查看官方文檔。
以上就是vue tailwindcss安裝配置教程示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue tailwindcss安裝配置的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue3中的模板語法和vue指令,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
element-plus結(jié)合sortablejs實現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實現(xiàn)table行拖動排序,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,感興趣的同學(xué)可以自己動手試一試2023-10-10
vue2前端使用axios發(fā)起post請求后端(springboot)接收不到值解決辦法
這篇文章主要介紹了vue2前端使用axios發(fā)起post請求后端(springboot)接收不到值解決辦法,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2024-03-03
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件，我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式，需要的朋友可以參考下2023-03-03
vue-router中的hash和history兩種模式的區(qū)別
大家都知道vue-router有兩種模式，hash模式和history模式，這里來談?wù)剉ue-router中的hash和history兩種模式的區(qū)別。感興趣的朋友一起看看吧2018-07-07
關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式
這篇文章主要介紹了關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue集成openlayers加載geojson并實現(xiàn)點(diǎn)擊彈窗教程
這篇文章主要為大家詳細(xì)介紹了vue集成openlayers加載geojson并實現(xiàn)點(diǎn)擊彈窗教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
$emit是Vue實例的一個方法,它用于觸發(fā)自定義事件,本文主要為大家詳細(xì)介紹了Vue如何使用$emit進(jìn)行組件通信,感興趣的小伙伴可以跟隨小編咦學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了Vue如何實現(xiàn)變量表達(dá)式選擇器，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)購物車場景下的應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11