Daisy UI의 base-100은 어떻게 적용되는걸까

component library for tailwindcss - daisyui 의 테마로 지정할 수 있는 base-100, base-content는 각각 root의 background, color로 지정된다.

module.exports = {
  //...
  daisyui: {
    themes: [
      {
        mytheme: {
          "primary": "#a991f7",
          "base-100": "#ffffff",
          "base-content": "#000",
          // ...
        },
      },
    ],
  },
}

왜 이렇게 되는지, 어떻게 이렇게 되는지 궁금해서 daisyui 내부 코드를 열어봤다.

결론

daisyui도 결국 tailwindcss의 plugin으로 동작하는거였다. 당연하게도

설명

base-100, base-content 두 요소로 theme 옵션을 넣은 값들은
tailwindcss addBase 함수의 동작에 의해
각각 :root 의 background-color, color 가 된다.

index.js

module.exports = require("tailwindcss/plugin")(mainFunction, {
	theme: {
		extend: {
			...

code

mainFunction

const mainFunction = ({ addBase, addComponents, config }) => {
...

  // inject @base style
  if (config("daisyui.base") != false) {
    addBase(base)
  }

...

code

base/colors.css

:root,
[data-theme] {
  background-color: hsl(var(--b1) / var(--tw-bg-opacity, 1));
  color: hsl(var(--bc) / var(--tw-text-opacity, 1));
}

• --b1: base-100
• --bc: base-content

code