Tailwind CSS 主題

主題配置

為您的項(xiàng)目定制默認(rèn)主題。

在 ?tailwind.config.js? 文件的 ?theme ?部分，您可以定義您項(xiàng)目的調(diào)色板、類型比例、字體、斷點(diǎn)、邊框半徑值等。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

我們提供了一個(gè)合理的 默認(rèn)主題，并提供了一套非常通用的值來讓您開始使用，但不要害怕改變或擴(kuò)展；我們鼓勵(lì)您根據(jù)您的設(shè)計(jì)目標(biāo)來定制它。

主題結(jié)構(gòu)

?theme ?對象包含 ?screens?、?colors ?和 ?spacing ?的鍵，以及每一個(gè)可定制的核心插件的鍵。

請參閱 默認(rèn)主題 獲取完整的主題選項(xiàng)列表。

屏幕

?screens ?鍵允許您自定義項(xiàng)目中的響應(yīng)斷點(diǎn)。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

顏色

?colors ?鍵允許您為您的項(xiàng)目定制全局調(diào)色板。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}

默認(rèn)情況下，這些顏色會被所有與顏色相關(guān)的核心插件繼承，比如 ?backgroundColor?、?borderColor?、?textColor ?等。

間距

?spacing ?鍵允許您為您的項(xiàng)目定制全局的間距和大小比例。

// tailwind.config.js
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',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
      11: '2.75rem',
      12: '3rem',
      14: '3.5rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      28: '7rem',
      32: '8rem',
      36: '9rem',
      40: '10rem',
      44: '11rem',
      48: '12rem',
      52: '13rem',
      56: '14rem',
      60: '15rem',
      64: '16rem',
      72: '18rem',
      80: '20rem',
      96: '24rem',
    },
  }
}

默認(rèn)情況下，這些值會被 ?padding?、 ?margin?、 ?width?、 ?height?、 ?maxHeight?、 ?gap?、 ?inset?、 ?space?以及 ?translate ?核心插件繼承。

核心插件

其余的 ?theme ?部分用于配置每個(gè)核心插件的可用值。

例如， ?borderRadius ?鍵可以讓您自定義將生成哪些邊框半徑功能類。

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

鍵決定了生成類的后綴，值決定了實(shí)際 CSS 聲明的值。

上面的 ?borderRadius ?配置示例將生成以下 CSS 類：

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

您會注意到，在主題配置中使用 ?DEFAULT ?鍵創(chuàng)建了一個(gè)沒有后綴的 ?rounded ?類。這是一個(gè)常見的慣例，在 Tailwind 中，所有的核心插件都支持這樣的用法。

要了解更多關(guān)于定制特定核心插件的信息，請?jiān)L問該插件的文檔。

關(guān)于可用的主題屬性及其默認(rèn)值的完整參考，參見默認(rèn)主題配置。

定制默認(rèn)主體

開箱即用，您的項(xiàng)目將自動(dòng)繼承默認(rèn)主題配置中的值。如果您想自定義默認(rèn)主題，您有幾個(gè)不同的選項(xiàng)，取決于您的目標(biāo)。

擴(kuò)展默認(rèn)主題

如果您想保留一個(gè)主題選項(xiàng)的默認(rèn)值，但也要添加新的值，在配置文件的 ?theme ?部分的 ?extend ?鍵下添加您的擴(kuò)展。

例如，如果您想增加一個(gè)額外的斷點(diǎn)，但保留現(xiàn)有的斷點(diǎn)，您可以擴(kuò)展 ?screens ?屬性。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // Adds a new breakpoint in addition to the default breakpoints
      screens: {
        '3xl': '1600px',
      }
    }
  }
}

覆蓋默認(rèn)主題

要覆蓋默認(rèn)主題中的一個(gè)選項(xiàng)，直接在您的 ?tailwind.config.js? 文件的 ?theme?部分添加您的覆蓋。

// tailwind.config.js
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',
    }
  }
}

這將完全替換 Tailwind 中該鍵的默認(rèn)配置，所以在上面的例子中，沒有一個(gè)默認(rèn)的透明度類將被生成。

任何您沒有提供的鍵都將從默認(rèn)主題中繼承，所以在上面的例子中，默認(rèn)的主題配置，如顏色，間距，邊框半徑，背景位置等將被保留。

當(dāng)然，在同一配置下，您既可以覆蓋默認(rèn)主題的一部分，也可以擴(kuò)展默認(rèn)主題的另一部分。

// tailwind.config.js
module.exports = {
  theme: {
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    },
    extend: {
      screens: {
        '3xl': '1600px',
      }
    }
  }
}

引用其它值

如果您需要在您的主題中引用另一個(gè)值，您可以通過提供一個(gè)閉包而不是一個(gè)靜態(tài)值來實(shí)現(xiàn)。該閉包將收到一個(gè) ?theme()? 函數(shù)，您可以使用點(diǎn)符號來查找您主題中的其他值。

例如，您可以通過在您的 ?fill? 配置中引用 ?theme('colors')? 來為您的調(diào)色板中的每一種顏色生成 ?fill ?功能類。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // ...
    },
    fill: theme => theme('colors')
  }
}

?theme()? 函數(shù)試圖從完全合并的主題對象中找到您正在尋找的值，因此它可以引用您自己的定制以及默認(rèn)的主題值。它也是遞歸工作的，所以只要在鏈的最后有一個(gè)靜態(tài)值，它就能解析出您要找的值。

請注意，您只能將這種閉包與頂級主題鍵一起使用，而不是每個(gè)部分內(nèi)的鍵。

您不能將函數(shù)用于單個(gè)值

// tailwind.config.js
module.exports = {
  theme: {
    fill: {
      gray: theme => theme('colors.gray')
    }
  }
}

使用頂級主題鍵的功能

// tailwind.config.js
module.exports = {
  theme: {
    fill: theme => ({
      gray: theme('colors.gray')
    })
  }
}

引用默認(rèn)主題

如果您出于任何原因想在默認(rèn)主題中引用一個(gè)值，您可以從 ?tailwindcss/defaultTheme? 中導(dǎo)入它。

一個(gè)有用的例子是，如果您想添加一個(gè)字體家族到 Tailwind 的默認(rèn)字體堆棧中：

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

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

禁用全部核心插件

如果您不想為某個(gè)核心插件生成任何類，最好在您的 ?corePlugins ?配置中把該插件設(shè)置為 false，而不是在您的 ?theme ?配置中為該鍵提供一個(gè)空對象。

不要在您的主題配置中賦值一個(gè)空對象。

// tailwind.config.js
module.exports = {
  theme: {
    opacity: {},
  }
}

請?jiān)谀?nbsp;corePlugins 配置中禁用該插件。

// tailwind.config.js
module.exports = {
  corePlugins: {
    opacity: false,
  }
}

最終的結(jié)果是一樣的，但既然很多核心插件沒有暴露配置，只能用 ?corePlugins ?來禁用，所以最好保持一致。

添加自己的鍵

在一些情況下，向 ?theme ?對象添加自己的鍵是有用的。

其中一個(gè)例子是添加新的鍵，為多個(gè)核心插件之間的共同值創(chuàng)建一個(gè)單一的真實(shí)來源。例如，您可以提取一個(gè)共享的 ?positions ?對象，它可以被 ?backgroundPosition ?和 ?objectPosition ?插件引用。

// tailwind.config.js
module.exports = {
  theme: {
    positions: {
      bottom: 'bottom',
      center: 'center',
      left: 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      right: 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      top: 'top',
    },
    backgroundPosition: theme => theme('positions'),
    objectPosition: theme => theme('positions'),
  }
}

另一個(gè)例子是在自定義插件內(nèi)部添加一個(gè)新的鍵來引用。例如，如果您為您的項(xiàng)目編寫了一個(gè) ?filters ?插件，您可以在您的 ?theme ?對象中添加一個(gè) ?filters ?鍵，讓插件引用。

// tailwind.config.js
module.exports = {
  theme: {
    filters: {
      none: 'none',
      grayscale: 'grayscale(1)',
      invert: 'invert(1)',
      sepia: 'sepia(1)',
    }
  },
  plugins: [
    require('./plugins/filters')
  ],
}

由于整個(gè) ?theme ?對象可以通過theme 函數(shù) 在您的 CSS 中使用，您也可以添加一個(gè)鍵來在您的 CSS 中引用它。

配置參考

除了 ?screens?、?colors ?和 ?spacing?， ?theme ?對象中的所有的鍵都映射到 Tailwind 的一個(gè) 核心插件。由于許多插件負(fù)責(zé)的 CSS 屬性只接受一組靜態(tài)的值（例如 ?float?），所以請注意，不是每個(gè)插件在 ?theme ?對象中都有一個(gè)對應(yīng)的鍵。

所有這些鍵在 ?t?heme.extend?? 鍵下也是可用的，用來啟用 擴(kuò)展默認(rèn)主題。