Theme Configuration - TailwindCSS中文文档 | TailwindCSS中文网Tailwind CSS home pagev3.4.17Introducing CatalystA modern application UI kit for ReactThemeTailwind CSS on GitHubSearchNavigationNavigation定制Theme Configurationv4.0 Beta Documentation →Preview the next Tailwind CSS.The theme section of your tailwind.config.js file is where you define your project’s color palette, type scale, fonts, breakpoints, border radius values, and more. 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', } } } } We provide a sensible default theme with a very generous set of values to get you started, but don’t be afraid to change it or extend it; you’re encouraged to customize it as much as you need to fit the goals of your design. ​Theme structure The theme object contains keys for screens, colors, and spacing, as well as a key for each customizable core plugin. See the theme configuration reference or the default theme for a complete list of theme options. ​Screens The screens key allows you to customize the responsive breakpoints in your project. tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { theme: { screens: { 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px', } } } To learn more, see the breakpoint customization documentation. ​Colors The colors key allows you to customize the global color palette for your project. tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { theme: { colors: { transparent: 'transparent', black: '#000', white: '#fff', gray: { 100: '#f7fafc', // ... 900: '#1a202c', }, // ... } } } By default, these colors are inherited by all color-related core plugins, like backgroundColor, borderColor, textColor, and others. To learn more, see the color customization documentation. ​Spacing The spacing key allows you to customize the global spacing and sizing scale for your project. tailwind.config.js/** @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', 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', }, } } By default, these values are inherited by the padding, margin, width, height, maxHeight, flex-basis, gap, inset, space, translate, scrollMargin, scrollPadding, and textIndent core plugins. To learn more, see the spacing customization documentation. ​Core plugins The rest of the theme section is used to configure which values are available for each individual core plugin. For example, the borderRadius key lets you customize which border radius utilities will be generated: module.exports = { theme: { borderRadius: { 'none': '0', 'sm': '.125rem', DEFAULT: '.25rem', 'lg': '.5rem', 'full': '9999px', }, } } The keys determine the suffix for the generated classes, and the values determine the value of the actual CSS declaration. The example borderRadius configuration above would generate the following CSS classes: .rounded-none { border-radius: 0 } .rounded-sm { border-radius: .125rem } .rounded { border-radius: .25rem } .rounded-lg { border-radius: .5rem } .rounded-full { border-radius: 9999px } You’ll notice that using a key of DEFAULT in the theme configuration created the class rounded with no suffix. This is a common convention in Tailwind and is supported by all core plugins. To learn more about customizing a specific core plugin, visit the documentation for that plugin. For a complete reference of available theme properties and their default values, see the default theme configuration. ​Customizing the default theme Out of the box, your project will automatically inherit the values from the default theme configuration. If you would like to customize the default theme, you have a few different options depending on your goals. ​Extending the default theme If you’d like to preserve the default values for a theme option but also add new values, add your extensions under the theme.extend key in your configuration file. Values under this key are merged with existing theme values and automatically become available as new classes that you can use. As an example, here we extend the fontFamily property to add the font-display class that can change the font used on an element: tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { fontFamily: { display: 'Oswald, ui-serif', // Adds a new `font-display` class } } } } After adding this to your theme you can use it just like any other font family utility: &lt;h1 class="font-display"> This uses the Oswald font &lt;/h1> In some cases, properties map to variants that can be placed in front of a utility to conditionally apply its styles. For example, to add a 3xl screen size that works just like the existing responsive screens, add a property under the screens key: tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { screens: { '3xl': '1600px', // Adds a new `3xl:` screen variant } } } } With this addition, a new 3xl screen size is made available alongside the existing responsive variants like sm, md, lg, etc. You can use this new variant by placing it before a utility class: &lt;blockquote class="text-base md:text-md 3xl:text-lg"> Oh I gotta get on that internet, I'm late on everything! &lt;/blockquote> ​Overriding the default theme To override an option in the default theme, add your overrides directly under the theme section of your tailwind.config.js: 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', } } } This will completely replace Tailwind’s default configuration for that key, so in the example above none of the default opacity utilities would be generated. Any keys you do not provide will be inherited from the default theme, so in the above example, the default theme configuration for things like colors, spacing, border-radius, background-position, etc. would be preserved. You can of course both override some parts of the default theme and extend other parts of the default theme within the same configuration: tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { theme: { opacity: { '0': '0', '20': '0.2', '40': '0.4', '60': '0.6', '80': '0.8', '100': '1', }, extend: { screens: { '3xl': '1600px', } } } } ​Referencing other values If you need to reference another value in your theme, you can do so by providing a closure instead of a static value. The closure will receive an object that includes a theme() function that you can use to look up other values in your theme using dot notation. For example, you could generate background-size utilities for every value in your spacing scale by referencing theme(&#x27;spacing&#x27;) in your backgroundSize configuration: tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { theme: { spacing: { // ... }, backgroundSize: ({ theme }) => ({ auto: 'auto', cover: 'cover', contain: 'contain', ...theme('spacing') }) } } The theme() function attempts to find the value you are looking
