daisyUI怎么解決TailwindCSS堆砌class問(wèn)題

這篇文章主要介紹“daisyUI怎么解決TailwindCSS堆砌class問(wèn)題”，在日常操作中，相信很多人在daisyUI怎么解決TailwindCSS堆砌class問(wèn)題問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”daisyUI怎么解決TailwindCSS堆砌class問(wèn)題”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

daisyUI概述

daisyUI是一個(gè)可定制的TailwindCSS的組件庫(kù)，目前（發(fā)文日期）在GitHub中已經(jīng)有12.8k的star數(shù)量。

它與現(xiàn)在常用的ElementUI或者AntDesign不同，它提供了一些類(lèi)名，類(lèi)似于Bootstrap，想要拿來(lái)即用的組件需要自己進(jìn)行封裝。

daisyUI官網(wǎng)中介紹了daisyUI的5個(gè)特點(diǎn)：

• Tailwind CSS 的插件

• 快速開(kāi)發(fā)

• 更純凈的 HTML

• 深度自定義、可定制主題

• 純凈 CSS、支持任意框架

豐富的資源

daisyUI內(nèi)置了29款主題，開(kāi)發(fā)出的網(wǎng)站可以直接使用這些主題

除了這內(nèi)置的29款主題，還支持自定義，可以參考。

daisyUI目前一共內(nèi)置了47個(gè)組件，如下圖：

對(duì)比TailwindCSS

daisyUI雖然是TailwindCSS插件，但是卻有一點(diǎn)“反”TailwindCSS的意思，如果我們想要實(shí)現(xiàn)一個(gè)按鈕，使用TailwindCSS的寫(xiě)法如下：

<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>

上面的代碼實(shí)現(xiàn)了了一個(gè)按鈕，可以明顯看后者比前者更節(jié)省代碼。

頑強(qiáng)的適用性

daisy是一個(gè)純凈的CSS組件，它幾乎適用于所有的前端開(kāi)發(fā)場(chǎng)景，我在官網(wǎng)截了個(gè)圖

可以看到目前已經(jīng)支持全部的前端開(kāi)發(fā)場(chǎng)景。

快速上手

現(xiàn)在我們使用Vue3+TS+Vite3創(chuàng)建要給項(xiàng)目，并在項(xiàng)目中應(yīng)用daisyUI，首先就是通過(guò)Vite創(chuàng)建一個(gè)Vu3+TS的項(xiàng)目，創(chuàng)建過(guò)程如下：

這里我使用pnpm作為包管理工具，項(xiàng)目安裝過(guò)程如下：

pnpm create vite
# project name -> daisyui-demo
# select a framework -> vue
# select a variant -> vue+ts
cd daisyui-demo
pnpm install
code . # 使用VScode打開(kāi)項(xiàng)目

安裝完成之后我們?cè)陧?xiàng)目中安裝一下TailwindCSS，daisyUI的使用需要TailwindCSS；過(guò)程如下：

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)建一個(gè)css文件，引入TailwindCSS的內(nèi)容

// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

然后在main.ts中引入這個(gè)css：

import { createApp } from 'vue'
import './style.css'
// 引入前面添加的css
import './index.css'
import App from './App.vue'
createApp(App).mount('#app')

到這為止我們就安裝好了我們TailwindCSS，現(xiàn)在來(lái)安裝下daisyUI，過(guò)程如下：

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)在這個(gè)就寫(xiě)完了，我們?nèi)?code>App.vue中簡(jiǎn)單的使用一下這個(gè)UI組件。實(shí)例代碼如下：

<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,2h2a1,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有一個(gè)好玩的特性就是允許自定義主題，而且非常簡(jiǎn)單，只需要在tailwind.config.js中添加一個(gè)daisyui的配置項(xiàng)，增加一個(gè)themes的數(shù)組即可，實(shí)例代碼如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      {
        // key為自定義主題名稱(chēng)
        '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提供的主題生成器，可以輕松實(shí)現(xiàn)自定義主題，自定義主題實(shí)用如下：

封裝一個(gè)button組件

daisyUI是基于原始的CSS實(shí)現(xiàn)的，基本上所有的組件只有樣式?jīng)]有功能，現(xiàn)在就簡(jiǎn)單的封裝一個(gè)button組件再來(lái)學(xué)習(xí)一下daisyUI。

首先定義一下目錄結(jié)構(gòu)，如下所示：

monorepo-demo
├── src
│   ├── components
│   │   ├── button
│   │   │   ├── index.ts
│   │   │   ├── src
│   │   │   │   └── YwzButton.vue
├── pnpm-lock.yaml
└── package.json

其中src/components/button/index.ts的內(nèi)容如下：

import YwzButton from './src/YwzButton.vue'
export { YwzButton }

這里就執(zhí)行了導(dǎo)入導(dǎo)出操作

主要代碼如下：

<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">
    <!-- 默認(rèn)插槽 -->
    <slot></slot>
  </button>
</template>
<style scoped></style>

使用這個(gè)組件也很簡(jiǎn)單，代碼如下：

<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>

到此，關(guān)于“daisyUI怎么解決TailwindCSS堆砌class問(wèn)題”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！