Tailwindcss multitheme - Thịnh's Corner

Tailwindcss 2.0 có thêm tính năng darkmode. Nhưng với mình, chỉ 2 theme (light/dark) là không đủ. Snippet này hướng dẫn config nhiều theme cho tailwindcss.

Định nghĩa nhiều theme khác nhau bằng CSS variable:

@tailwind base;
@tailwind components;
@tailwind utilities;
/* Định nghĩa 2 theme: */
.theme-first {
  /*25 23 36 nghĩa là rgb(25,23,36) */
  --color-base: 25 23 36;
  --color-surface: 31 29 46;
  --color-text: 38 35 58;
}

.theme-second {
  --color-base: 250 244 237;
  --color-surface: 255 250 243;
  --color-text: 242 233 222;
}

/* Sử dụng color theme trong class: */
.my-box {
  width: 100px;
  height: 100px;
  background: rgb(var(--color-base));
}

Để sử dụng theme, đơn giản ta chỉ cần gắn tên class của theme đó vào thẻ body. Ví dụ:

<body class="theme-first">
  <div class="my-box"></div>
</body>

Setup tailwindcss. Trong file tailwind.config.js:

// Cần hàm này để có thể sử dụng class opacity-[value]
function withOpacityValue(variable) {
  return ({ opacityValue }) => {
    if (opacityValue === undefined) {
      return `rgb(var(${variable}))`;
    }
    return `rgb(var(${variable}) / ${opacityValue})`;
  };
}

// Có bao nhiêu css varible trong theme thì ta định nghĩa bấy nhiêu đó:
let themeColors = {
  base: withOpacityValue("--color-base"),
  surface: withOpacityValue("--color-surface"),
  text: withOpacityValue("--color-text"),
  //...
};

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: themeColors,
    },
  },
  plugins: [],
};

Sử dụng:

<button className="bg-base text-text p-3">Hello World</button>

theme-firsttheme-second