Tailwind CSS - 主題配置

---

---

Tailwind CSS 主題配置指定專案的主題。

在 `tailwind.config.js` 中，“主題”部分允許您定義專案的調色盤、型別比例、字型、斷點、邊框半徑值等等。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

主題結構

`tailwind.config.js` 的“主題”部分包含一系列鍵，例如 `screens`、`colors`、`spacing` 和 `corePlugins` 用於自定義。

螢幕尺寸

`screens` 鍵允許您設定專案中的響應式斷點。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

顏色

`colors` 鍵允許您設定專案的全域性調色盤。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}

間距

`spacing` 鍵允許您設定專案的全域性間距和大小比例。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
    },
  }
}

核心外掛

主題設定允許您為每個外掛選擇選項。例如，`borderRadius` 設定圓角樣式。

module.exports = {
    theme: {
        borderRadius: {
        'none': '0',
        'sm': '.125rem',
        DEFAULT: '.25rem',
        'lg': '.5rem',
        'full': '9999px',
        },
    }
    }

名稱成為類名，值設定樣式。這就是 Tailwind 對所有外掛的工作方式。

.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }

自定義預設主題

您的專案會自動使用預設主題設定。如果您想更改它們，您可以自定義主題以滿足您的需求。

擴充套件預設主題

`theme.extend` 選項允許您向主題新增新值，同時保留預設值。這將結合新值和現有值，為您建立新的類。

例如，這裡我們擴充套件 `fontFamily` 屬性以新增 `font-display` 類，該類可以更改元素上使用的字型

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: 'Oswald, ui-serif', // Adds a new `font-display` class
      }
    }
  }
}

新增到您的主題後，您可以像使用任何其他字體系列實用程式一樣使用它

<h1 class="font-display">
  This uses the Oswald font
</h1>

覆蓋預設主題

您可以透過直接在 `tailwind.config.js` 中的主題部分新增覆蓋來更改預設主題選項。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}

引用其他值

使用閉包來引用其他主題值。它為您提供了一個 `theme()` 函式，可以使用點表示法訪問其他值。

例如，您可以透過在您的 `backgroundSize` 配置中引用 `theme('spacing')` 來為 `spacing` 比例中的每個值生成 `background-size` 實用程式。

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    spacing: {
        // ...
    },
    backgroundSize: ({ theme }) => ({
        auto: 'auto',
        cover: 'cover',
        contain: 'contain',
        ...theme('spacing')
    })
    }
}

**注意：**對頂級主題鍵使用函式。

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    fill: ({ theme }) => ({
        gray: theme('colors.gray')
    })
    }
}

引用預設主題

要使用預設主題中的值，請從 `tailwindcss/defaultTheme` 匯入它。

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}

停用整個核心外掛

要停用核心外掛，請在 `corePlugins` 中將其設定為 `false`，而不是在主題配置中設定為空物件。

/** Don't Do */
  
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {},
  }
}

/** Always Do */
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
  opacity: false,
}
}

配置參考

大多數主題物件鍵與 Tailwind 的核心外掛匹配，除了 `screens`、`colors` 和 `spacing`。一些外掛沒有主題鍵，因為它們只接受固定值。您還可以使用 `theme.extend` 鍵擴充套件預設主題。

所有這些鍵也可以在 `theme.extend` 鍵下使用，以啟用擴充套件預設主題。