daisyUI怎么解决TailwindCSS堆砌class问题

    daisyUI概述

    daisyUI是一个可定制的TailwindCSS的组件库,目前(发文日期)在GitHub中已经有12.8k的star数量。

    它与现在常用的ElementUI或者AntDesign不同,它提供了一些类名,类似于Bootstrap,想要拿来即用的组件需要自己进行封装。

    daisyUI官网中介绍了daisyUI的5个特点:

    • Tailwind CSS 的插件

    • 快速开发

    • 更纯净的 HTML

    • 深度自定义、可定制主题

    • 纯净 CSS、支持任意框架

    丰富的资源

    daisyUI内置了29款主题,开发出的网站可以直接使用这些主题

    除了这内置的29款主题,还支持自定义,可以参考。

    daisyUI目前一共内置了47个组件,如下图:

    daisyUI怎么解决TailwindCSS堆砌class问题

    对比TailwindCSS

    daisyUI虽然是TailwindCSS插件,但是却有一点“反”TailwindCSS的意思,如果我们想要实现一个按钮,使用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>

    上面的代码实现了了一个按钮,可以明显看后者比前者更节省代码。

    顽强的适用性

    daisy是一个纯净的CSS组件,它几乎适用于所有的前端开发场景,我在官网截了个图

    daisyUI怎么解决TailwindCSS堆砌class问题

    可以看到目前已经支持全部的前端开发场景。

    快速上手

    现在我们使用Vue3+TS+Vite3创建要给项目,并在项目中应用daisyUI,首先就是通过Vite创建一个Vu3+TS的项目,创建过程如下:

    这里我使用pnpm作为包管理工具,项目安装过程如下:

    pnpm create vite# project name -> daisyui-demo# select a framework -> vue# select a variant -> vue+tscd daisyui-demopnpm installcode . # 使用VScode打开项目

    安装完成之后我们在项目中安装一下TailwindCSS,daisyUI的使用需要TailwindCSS;过程如下:

    pnpm install -D tailwindcss postcss au较好refixer# 生成配置文件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: [],}

    然后创建一个css文件,引入TailwindCSS的内容

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

    然后在main.ts中引入这个css:

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

    到这为止我们就安装好了我们TailwindCSS,现在来安装下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引入一下呀

    现在这个就写完了,我们去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,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有一个好玩的特性就是允许自定义主题,而且非常简单,只需要在tailwind.config.js中添加一个daisyui的配置项,增加一个themes的数组即可,实例代码如下:

    /** @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提供的主题生成器,可以轻松实现自定义主题,自定义主题实用如下:

    daisyUI怎么解决TailwindCSS堆砌class问题

    封装一个button组件

    daisyUI是基于原始的CSS实现的,基本上所有的组件只有样式没有功能,现在就简单的封装一个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 }

    这里就执行了导入导出操作

    主要代码如下:

    <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怎么解决TailwindCSS堆砌class问题”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

    文章标题:daisyUI怎么解决TailwindCSS堆砌class问题,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/21432

    (0)
    打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
    亿速云的头像亿速云认证作者
    上一篇 2022年8月30日 下午4:27
    下一篇 2022年8月30日 下午11:14

    相关推荐

    • web中常用的加密算法有哪些

      加密算法我们整体可以分为:可逆加密和不可逆加密,可逆加密又可以分为:对称加密和非对称加密。 一、不可逆加密 常见的不可逆加密算法有MD5,HMAC,SHA1、SHA-224、SHA-256、SHA-384,和SHA-512,其中SHA-224、SHA-256、SHA-384,和SHA-512我们可以…

      2022年8月29日
      1.0K00
    • html的缩进属性介绍

      在html中,缩进属性是“text-indent”属性;该属性用于规定文本块中首行文本的缩进,只需将属性值设置为合理的大小即可,若属性值为正值,则首行会被缩进到右边,若属性值为负值,则首行会被缩进到左边,语法为“<element style=”text-indent:属性值&#82…

      2022年9月13日
      2.4K00
    • SQL查询怎么给表起别名

      可以通过空格或者as给表起别名 但是注意如果操作的数据库是Oracle的话,只能使用空格,as不符合Oracle的语法。 举个栗子 简单查询中使用别名 select *from student swhere s.id = ’10’; 在简单的查询中使用别名,一般没有特别需要注意的地方,要做的操作少 …

      2022年9月8日
      55000
    • windows vc运行库介绍及常见问题怎么解决

      vc运行库是干嘛的 答:vc运行库主要是用于软件的运行支持。 1、vc运行库是使用microsoft visual studio编写的一系列.dll文件合集。 2、因此vc运行库主要服务于一些同样使用类似语言编写的软件或游戏。 3、相信很多朋友都遇到过打开软件出现弹窗提示错误代码,无法启动的问题。 …

      2022年9月20日
      76000
    • pr视频怎么导出为手机视频大小

      pr视频导出为手机视频大小的方法: 1、首先,我们点击左上角“文件”并新建一个“项目” 2、新建后,右键空白处,选择“新建”一个“序列” 3、然后进入“设置”,根据图示参数进行设置,最重要的是设置“垂直比9:16” (手机常用的大小有360×640、750×1334、720&#2…

      2022年8月31日
      85700
    • windows浩辰cad看图王测量尺寸不对怎么解决

      解决方法: 1、我们可以看到首次测量的距离如图所示,发现与已知尺寸不同。 2、这时候我们点击窗口最下方的对象捕捉,如图所示、 3、再点击上方测量中的“距离” 4、然后我们将鼠标移动到需要测量的点,会发现软件会自动帮你定位。 5、选取名列前茅个点后,再使用相同的方法选取第二个点。 6、选取完成后按下键…

      2022年9月21日
      67700
    • nwd文件怎么打开

      nwd文件能够使用“Autodesk Navisworks”软件打开;该软件是一款用于分析、仿真和项目信息交流的全面审阅解决方案,被广泛应用于建筑工程项目管理和设计方面,该软件能够帮助用户提前预测和发现项目流程中的错误,避免这些问题导致项目的中断。 本教程操作环境:windows10系统、DELL …

      2022年9月8日
      1.1K00
    • css选择器可以是标签的名字吗

      可以是;元素选择器就是使用HTML标签名的。在css中,元素选择器就是通过HTML页面的元素(标签)名定位具体HTML元素,语法结构为“元素名 {属性:属性值;}”;如果元素选择器单独使用的话,会定位当前HTML页面中所有该元素名的元素。 本教程操作环境:windows7系统、CSS3&&a…

      2022年9月22日
      49900
    • windows Office365excl表格冻结窗口在哪

      Office365excl表格冻结窗口位置: 1、首先打开office365,点击新建一个excel表格。 2、然后选中自己需要操作的表格进行编辑。 3、点击上方工具栏中的“视图”。 4、最后点击“冻结窗格”即可完成操作。 关于“windows Office365excl表格冻结窗口在哪”的内容就介…

      2022年9月20日
      50700
    • C语言中如何避免弱加密

      1、弱加密 加密指以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信息的内容。常见的加密算法主要可分为:对称加密、非对称加密、单向加密。各类加密算法的使用场景不同,根据加密算法的特性如运算速度、安全性、密钥管理方式来选择合适的算法,但安全性…

      2022年9月19日
      32600
    站长微信
    站长微信
    电话联系

    400-800-1024

    工作日9:30-21:00在线

    分享本页
    返回顶部