[筆記] TailwindCSS

Configurations

資訊

default configuration @ Github

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./pages/**/*.{html,js}', './components/**/*.{html,js}'],
  darkMode: 'selector',

  theme: {
    // override the entire spacing theme
    spacing: {},
    extend: {
      // add new value or merge with default spacing theme
      spacing: {},
    },
  },

  safelist: ['bg-red-500', 'text-3xl', 'lg:text-4xl'],
  // ...
};

Presets

官方文件

Presets

• 重設 presets：移除所有 default configuration
  • 預設的情況下，presets 仍然會繼承 Tailwind's 的 default configuration（須留意 merge default configuration 的方式）。
  • 如果你希望移除所有 default configuration，則可以使用 presets: [] 的設定，等於是重設 presets。
• merge default configuration 的方式（參考，Merging logic in-depth）
  • 文件中，這裡列出的屬性都會直接被覆蓋
  • Theme
    • Shallow Merge：在 theme object 中的 top-level key 會直接被覆蓋掉，例如，如果給了 spacing、colors、borderRadius 等等這些 top-level key（參考：theme configuration reference 或 default configuration @ Github），則會直接整個覆蓋掉 Tailwind 原本的。
    • Extend：如果不希望把 theme 裡的 top-level key 直接整個覆蓋掉的話，應該要使用 theme.extend

Dark Mode

官方文件

dark mode

在 Tailwind CSS 中，如果希望某些 CSS 只套用在 dark mode 時，可以用 dark:xxx 的 CSS class，例如 dark:bg-slate-800。

• prefers-color-scheme
  • 預設的情況下，Tailwind CSS 會基於使用者在瀏覽器或 OS 的設定來套用 dark mode 的樣式。
• Selector
  • darkMode: 'selector'：如果你希望手動控制什麼時候要套用 dark mode，而不是依賴於瀏覽器的設定，則可以使用這個設定，如此，只要在 html 或 body 上有 .dark 的 CSS class 時，就會套用 dark:bg-slate-800
  • darkMode: ['selector', '[data-mode="dark"]']，預設使用 selector 的情況下，Tailwind 會用 .dark 當 selector，並對其子層元件套用 dark mode。但某些情況下，你可能會需要自訂 selector，這時候就可以用這個設定。以這個設定來說，只要在 html 或 body 加上 [data-model="dark"] 的這個屬性後，dark mode 的樣式才會被套用。

警告

要特別留意的是，如果你的 TailwindCSS 有使用 prefix，你需要加上 .tw-dark 而不是 .dark 才能套用 dark mode。

提示

如果希望預設可以套用使用者瀏覽器或 OS 的設定，同時又讓使用者可以手動選擇要使用的亮/暗色主題，可以參考官網這裡Supporting system preference and manual selection 的範例。

Content Configuration

• safelist：預設的情況下，Tailwind 會去 parse content 中的 CSS classes，以確保最後 bundle 出來的檔案沒有多餘、無用的 class name；然後，如果在某些情況下，即使 App 中沒有用到這個 class，但你仍希望這些 classes 被放在最終 build 好的檔案中，則可以把它們放在 safelist 中，這應該是最終不得不才使用的做法（ref: content-configuration）。