daisyUI解決TailwindCSS堆砌class問題詳解
更新時間：2022年07月20日 09:04:17 作者：一碗周
這篇文章主要為大家介紹了daisyUI解決TailwindCSS堆砌class問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
?? 寫在前面
關于TailwindCSS是什么這里就不多叭叭了，這里簡要的說下TainwindCSS的一些問題，這就是一些缺點吧
- 顆粒度太細，使HTML結構過于復雜，或者說實現(xiàn)某個效果需要使用的類名太多，不易讀。
- 對于未接觸過TailwindCSS的同學來說，學習成本有些高。
daisyUI是一個CSS的組件庫，可以說是TailwindCSS的插件，這個組件庫避免了堆砌class名。
閱讀這篇文章你可以收獲如下內容：
- daisyUI是什么？有什么用？
- daisyUI如何自定義主題
- 基于daisyUI封裝一個button組件
??daisyUI概述
daisyUI是一個可定制的TailwindCSS的組件庫，目前（發(fā)文日期）在GitHub中已經(jīng)有12.8k的star數(shù)量。
它與現(xiàn)在常用的ElementUI或者AntDesign不同，它提供了一些類名，類似于Bootstrap，想要拿來即用的組件需要自己進行封裝。
daisyUI官網(wǎng)中介紹了daisyUI的5個特點：
- Tailwind CSS 的插件
- 快速開發(fā)
- 更純凈的 HTML
- 深度自定義、可定制主題
- 純凈 CSS、支持任意框架
官網(wǎng)截圖如下
?? 豐富的資源
daisyUI內置了29款主題，開發(fā)出的網(wǎng)站可以直接使用這些主題
除了這內置的29款主題，還支持自定義，可以參考。
daisyUI目前一共內置了47個組件，如下圖：
?? 對比TailwindCSS
daisyUI雖然是TailwindCSS插件，但是卻有一點“反”TailwindCSS的意思，如果我們想要實現(xiàn)一個按鈕，使用TailwindCSS的寫法如下：
<a class="inline-block px-4 py-3
text-sm font-semibold text-center
text-white uppercase transition
duration-200 ease-in-out bg-indigo-600
rounded-md cursor-pointer
hover:bg-indigo-700">Button</a>
而使用daisyUI的代碼如下：
<a class="btn btn-primary">Button</a>
上面的代碼實現(xiàn)了了一個按鈕，可以明顯看后者比前者更節(jié)省代碼。
?? 頑強的適用性
daisy是一個純凈的CSS組件，它幾乎適用于所有的前端開發(fā)場景，我在官網(wǎng)截了個圖
可以看到目前已經(jīng)支持全部的前端開發(fā)場景。
?? 快速上手
現(xiàn)在我們使用Vue3+TS+Vite3創(chuàng)建要給項目，并在項目中應用daisyUI，首先就是通過Vite創(chuàng)建一個Vu3+TS的項目，創(chuàng)建過程如下：
這里我使用pnpm作為包管理工具，項目安裝過程如下：
pnpm create vite # project name -> daisyui-demo # select a framework -> vue # select a variant -> vue+ts cd daisyui-demo pnpm install code . # 使用VScode打開項目
安裝完成之后我們在項目中安裝一下TailwindCSS，daisyUI的使用需要TailwindCSS；過程如下：
pnpm install -D tailwindcss postcss autoprefixer # 生成配置文件 pnpm tailwindcss init -p
修改一下tailwind.config配置文件，修改成下面這樣的。
// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
然后創(chuàng)建一個css文件，引入TailwindCSS的內容
// src/index.css @tailwind base; @tailwind components; @tailwind utilities;
然后在main.ts中引入這個css：
import { createApp } from 'vue'
import './style.css'
// 引入前面添加的css
import './index.css'
import App from './App.vue'
createApp(App).mount('#app')
到這為止我們就安裝好了我們TailwindCSS，現(xiàn)在來安裝下daisyUI，過程如下：
pnpm i daisyui
然后在修改一下tailwind.config配置文件，修改成下面這樣的。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [require('daisyui')],
}
就是把剛安裝的daisyUI引入一下呀
現(xiàn)在這個就寫完了，我們去App.vue中簡單的使用一下這個UI組件。實例代碼如下：
<script setup lang="ts">
const handleChangeTheme = () => {
const html = document.getElementsByTagName('html')[0]
const darkTheme = html.dataset.theme
if (darkTheme === 'dark') {
html.dataset.theme = 'light'
} else {
html.dataset.theme = 'dark'
}
}
</script>
<template>
<div class="button-container flex justify-center my-10">
<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-secondary">Button</button>
<button class="btn btn-accent">Button</button>
<button class="btn btn-ghost">Button</button>
<button class="btn btn-link">Button</button>
</div>
<div class="flex justify-center my-10">
<label class="swap swap-rotate">
<!-- this hidden checkbox controls the state -->
<input type="checkbox" @click="handleChangeTheme" />
<!-- sun icon -->
<svg
class="swap-on fill-current w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
/>
</svg>
<!-- moon icon -->
<svg
class="swap-off fill-current w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
/>
</svg>
</label>
</div>
<div class="flex justify-center">
<div class="alert alert-success shadow-lg w-96">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="stroke-current flex-shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Your purchase has been confirmed!</span>
</div>
</div>
</div>
</template>
<style scoped></style>
代碼的運行效果如下：
這里我僅僅展示了暗色和亮色兩個主題，其余主題也可以進行更換。
?? 自定義主題
daisyUI有一個好玩的特性就是允許自定義主題，而且非常簡單，只需要在tailwind.config.js中添加一個daisyui的配置項，增加一個themes的數(shù)組即可，實例代碼如下：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [require('daisyui')],
daisyui: {
themes: [
{
// key為自定義主題名稱
'ywz-theme': {
primary: '#fcaec1',
secondary: '#64c619',
accent: '#6fedac',
neutral: '#281E29',
info: '#83C2E2',
success: '#1BC55F',
warning: '#F0AA28',
error: '#E24B4B',
'base-100': '#EFEEF2',
'--rounded-box': '1rem', // border radius rounded-box utility class, used in card and other large boxes
'--rounded-btn': '0.5rem', // border radius rounded-btn utility class, used in buttons and similar element
'--rounded-badge': '1.9rem', // border radius rounded-badge utility class, used in badges and similar
'--animation-btn': '0.25s', // duration of animation when you click on button
'--animation-input': '0.2s', // duration of animation for inputs like checkbox, toggle, radio, etc
'--btn-text-case': 'uppercase', // set default text transform for buttons
'--btn-focus-scale': '0.95', // scale transform of button when you focus on it
'--border-btn': '1px', // border width of buttons
'--tab-border': '1px', // border width of tabs
'--tab-radius': '0.5rem', // border radius of tabs
},
},
],
},
}
可以配置daisyUI提供的主題生成器，可以輕松實現(xiàn)自定義主題，自定義主題實用如下：
?? 封裝一個button組件
daisyUI是基于原始的CSS實現(xiàn)的，基本上所有的組件只有樣式?jīng)]有功能，現(xiàn)在就簡單的封裝一個button組件再來學習一下daisyUI。
首先定義一下目錄結構，如下所示：
monorepo-demo ├── src │ ├── components │ │ ├── button │ │ │ ├── index.ts │ │ │ ├── src │ │ │ │ └── YwzButton.vue ├── pnpm-lock.yaml └── package.json
其中src/components/button/index.ts的內容如下：
import YwzButton from './src/YwzButton.vue'
export { YwzButton }
這里就執(zhí)行了導入導出操作
主要代碼如下：
src/components/button/src/YwzButton.vue
<script setup lang="ts">
import { computed } from 'vue'
interface Props {
disabled?: boolean
type?:'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link'
outline?: boolean
size?: 'lg' | 'md' | 'sm' | 'sx'
}
const props = defineProps<Props>()
const classComputed = computed(() => {
const classList = []
props.disabled && classList.push('btn-disabled')
props.type && classList.push('btn-' + props.type)
props.outline && classList.push('btn-outline')
props.size && classList.push('btn-' + props.size)
return classList
})
</script>
<template>
<button class="btn" :class="classComputed">
<!-- 默認插槽 -->
<slot></slot>
</button>
</template>
<style scoped></style>
使用這個組件也很簡單，代碼如下：
<script setup lang="ts">
import YwzButton from './components/button/src/YwzButton.vue'
</script>
<template>
<div class="button-container flex justify-center my-10">
<YwzButton type="error" outline size="lg">按鈕</YwzButton>
</div>
</template>
<style scoped></style>
?? 寫在最后
文章到這就結束了，daisyUI特別使用個人建站使用，尤其是對于沒有設計來說，內置了很多的主題非常的方便。而且它的官方文檔默認就支持中文，這一點對于英文不好的人來說非常的舒服了。
以上就是daisyUI解決TailwindCSS堆砌class問題詳解的詳細內容，更多關于daisyUI TailwindCSS堆砌class的資料請關注腳本之家其它相關文章！
相關文章
我們知道使用webpack打包vue項目后會生成一個dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運行呢?這篇文章主要給大家介紹了關于vue打包之后的dist文件如何運行的相關資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vuex 進階之模塊化組織詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
uni-app 是一個使用 Vue.js 開發(fā)所有前端應用的框架，今天通過本文給大家分享VSCode開發(fā)UNI-APP 配置教程及插件推薦與注意事項，感興趣的朋友一起看看吧2021-08-08
Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧2023-08-08
這篇文章主要介紹了如何使用 vue + d3 畫一棵樹,本文通過文字說明加代碼分析的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
這篇文章主要給大家介紹了手寫Vue源碼之數(shù)據(jù)劫持的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了解決Echarts 顯示隱藏后寬度高度變小的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue 使用html2canvas將DOM轉化為圖片的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue項目通過network的ip地址訪問注意事項及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 自定義指令directives及其常用鉤子函數(shù)說明
這篇文章主要介紹了vue 自定義指令directives及其常用鉤子函數(shù)說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01