vue?tailwindcss安裝配置教程示例詳解
更新時間：2023年09月01日 09:59:00 作者：風如也
這篇文章主要為大家介紹了vue?tailwindcss安裝配置教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
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安裝配置教程示例詳解的詳細內(nèi)容，更多關于vue tailwindcss安裝配置的資料請關注腳本之家其它相關文章！
相關文章
本文主要介紹了vue請求接口并且攜帶token的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要為大家介紹了Vue.js中安裝一個路由器demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
使用element-ui的Pagination分頁的注意事項及說明
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
下面小編就為大家分享一篇基于vue打包后字體和圖片資源失效問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue-cli腳手架-bulid下的配置文件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了如何在Vue.JS中使用圖標組件，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-08-08
vue點擊彈窗自動觸發(fā)點擊事件的解決辦法(模擬場景)
本文通過案例場景給大家介紹vue點擊彈窗自動觸發(fā)點擊事件的解決辦法，通過兩種方法給大家分享vue 自動觸發(fā)點擊事件的處理方法，對vue自動觸發(fā)點擊事件相關知識感興趣的朋友一起看看吧2021-05-05
這篇文章主要介紹了vue中跨域以及sessionId不一致問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了解決Vue router-link綁定事件不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue 使用lodash實現(xiàn)對象數(shù)組深拷貝操作
這篇文章主要介紹了vue 使用lodash實現(xiàn)對象數(shù)組深拷貝操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09