unocss support

[oekazuma]

Are there any plans to support unocss? unocss is an Atomic CSS engine that replaces Tailwind CSS.

The Tailwind CSS Plugin will not be supported, so you will need to create a new preset for unocss.

Reference: https://github.com/unocss/unocss/issues/561#issuecomment-1046515442

This is a low priority, but we encourage you to consider it.

[saadeghi]

I have no plans for this. converting all those styles to new format is not easy and main maintaining/updating it is not going to be easy unless there's an automated tool to to do the convert automatically.

But... what UnoCSS gives you is utility classes.
What daisyUI gives you is component classes (which can be modified using utility classes) So basically you can import both files and use them together (without the need of tailwindcss package)

https://stackblitz.com/edit/daisyui-vue-vite-unocss?file=src%2Fmain.js

You just need to purge unused daisyUI styles manually using another build tool

[marshallswain]

Update: I found a workaround in UnoCSS that makes the colors work. See comments further down.

@saadeghi , I've looked more into what it would take to get DaisyUI to work fully with UnoCSS. The only change required would be to comma separate the values in the CSS variables, like this:

--s: 314, 100%, 47%;

instead of the current values, which have no commas:

--s: 314 100% 47%;

The line in UnoCSS that parses colors is found here: https://github.com/unocss/unocss/blob/main/packages/preset-mini/src/utils/colors.ts#L56 I've tried changing the UnoCSS parses in every way I could think of without luck. But whenever I manually change the CSS variables in the browser to include commas, all of the utilities and variants just work.

How much effort would it be to comma-separate the values in the DaisyUI CSS variables? Or maybe we can make it configurable?

[marshallswain]

Hmmm. It's not quite as straightforward on the Tailwind, side, though. I just tried comma-separating the --n variable on daisyui.com, and it breaks the button display:

Normal:

Comma-separated:

[marshallswain]

Maybe a separate build would work.

UPDATE: Nope. See the solution in the next comment.

[marshallswain]

Well, I found a solid workaround. In the UnoCSS config, you set all of the class names again using hsla(var(...)) and it evaluates to the correct color, even for gradients, and other color variants.

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css', type: 'text/css' },
      ],
    },
  },
  runtimeConfig: {
    public: {
      apiUrl: '',
    },
  },
  modules: ['@unocss/nuxt'],
  unocss: {
    // presets
    uno: true, // enabled `@unocss/preset-uno`
    icons: true, // enabled `@unocss/preset-icons`
    // attributify: true, // enabled `@unocss/preset-attributify`,

    // core options
    theme: {
      colors: {
        primary: 'hsla(var(--p))',
        'primary-focus': 'hsla(var(--pf))',
        'primary-content': 'hsla(var(--pc))',
        secondary: 'hsla(var(--s))',
        'secondary-focus': 'hsla(var(--sf))',
        'secondary-content': 'hsla(var(--sc))',
        accent: 'hsla(var(--a))',
        'accent-focus': 'hsla(var(--af))',
        'accent-content': 'hsla(var(--ac))',
        neutral: 'hsla(var(--n))',
        'neutral-focus': 'hsla(var(--nf))',
        'neutral-content': 'hsla(var(--nc))',
        'base-100': 'hsla(var(--b1))',
        'base-200': 'hsla(var(--b2))',
        'base-300': 'hsla(var(--b3))',
        'base-content': 'hsla(var(--bc))',
        info: 'hsla(var(--in))',
        'info-content': 'hsla(var(--inc))',
        success: 'hsla(var(--su))',
        'success-content': 'hsla(var(--suc))',
        warning: 'hsla(var(--wa))',
        'warning-content': 'hsla(var(--wac))',
        error: 'hsla(var(--er))',
        'error-content': 'hsla(var(--erc))',
      },
    },
    shortcuts: [],
    rules: [],
  },
})

[saadeghi]

Thank you for the workaround @marshallswain but if the issue is using space separated color syntax, that's not really an issue from daisyUI. This syntax is valid CSS and is expected to work everywhere.

[marshallswain]

I recommend using the CDN version

[kidonng]

I came up with a "semi-precompiled" solution: https://github.com/kidonng/unocss-preset-daisy

Checkout the demo!

[saadeghi]

@kidonng Great job 👏