Tailwind CSS on GitHub

主题配置

为你的项目自定义默认主题。

tailwind.config.js配置文件中的theme可以让你自定义调色板,字体,断点,圆角等。

// 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',
      }
    }
  }
}

我们提供了一个很不错的默认主题,非常值得新手入门。但是我们也鼓励你自定义主题,来满足你的设计需求。


主题结构

theme配置项包含了screenscolorsspacing等字段,想要了解更多可配置内容,查看core plugin

有关主题配置的完整列表,查看主题配置参考或者默认主题

Screens

screens字段可以自定义屏幕断点:

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

查看自定义断点了解更多。

Colors

colors字段可以设置全局的字体:

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

      // ...
    }
  }
}

默认情况下,这些颜色会被所有与颜色相关的核心插件所继承,比如'backgroundColor, borderColor, textColor

查看自定义颜色了解更多。

Spacing

spacing字段可以设置全局的间距和尺寸:

// 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',
    },
  }
}

默认情况下,这些值会被padding, margin, width, height, maxHeight, gap, inset, space, 以及 translate 等核心插件继承

查看自定义间距了解更多

核心插件

theme配置项的其他字段,可以用来设置每个核心插件的值。

如,borderRadius字段让你可以自定义生成一些圆角工具类:

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

键决定了生成的类的后缀,值决定了实际生成的CSS类的值。

上面的borderRadius配置会生成:

.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字段会生成一个没有后缀的rounded类。这是一个Tailwind的约定,所有核心插件都支持。

要了解关于定制特定核心插件的更多信息,请访问该插件的文档。

有关可用主题属性及其默认值的完整参考,查看默认主题配置

自定义默认主题

开箱即用,你的项目将自动继承默认主题配置的值。你有几个不同的选项来自定义默认主题。

继承默认主题

如果您想保留一些theme选项的默认值,但也想添加新值,那么在配置文件的theme部分的extend字段下添加扩展名。

例如,如果你想添加一个额外的断点,但保留现有的断点,你可以扩展screens属性:

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

覆盖默认主题

直接在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',
    }
  }
}

这将会完全的覆盖默认配置,所以上面的例子不会生成任何默认的opacity的工具类。

其他你没有配置的字段将继承默认的主题,上面的例子中,还是会保留默认主题中的颜色,间距,字体等工具类。

当然,你既可以覆盖默认主题的某些字段,也可以同时扩展其他的字段:

// 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',
      }
    }
  }
}

引用其他值

如果需要在主题中引用另一个值,可以通过提供闭包而不是静态值来实现。闭包将接收一个theme()函数,你可以使用点操作符在主题中查找其他值。

如:你可以为所有的颜色生成fill工具类,只需要设置theme('colors')fill配置项:

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

theme()函数试图从完全合并的theme对象中找到你想要的值,因此它可以引用你自己的定制以及默认的主题值。它还可以递归地工作,因此只要在链的末端有一个静态值,它就能够解析你需要的值。

需要注意的是,这只能用在主题的顶层字段中。

引用默认主题

如果你想引入默认主题的一些内容,你可以引入tailwindcss/defaultTheme

这里有一个很有用的例子,如果你想添加一个字体到Tailwind的默认字体集:

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

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

禁用全部核心插件

如果你不想为某个核心插件生成任何类,最好在你的corePlugins配置中将该插件设置为false,而不是在你的主题配置中为该字段提供一个空对象。

不要在你的主题配置中分配空对象

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

在你的`corerepugins`配置中禁用插件

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

最终的结果是一样的,但是由于许多核心插件没有公开任何配置,它们只能使用coreplugin禁用,所以最好保持一致。

添加自定义字段

theme对象下添加自定义字段,在很多情况下是非常有用的。

下面这个例子,创建一个共享的positions对象,它可以被backgroundPositionobjectPosition插件引用:

// 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'),
  }
}

另外一个例子是为自定义插件中添加一个新的字段。例如,你已经为你的项目添加两个一个过滤器插件,你可以在主题对象中添加一个过滤器字段来被插件引用:

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

由于在CSS中使用theme函数可以获取整个theme对象,你还可以添加一个字段,以便在CSS中引用。

配置引用

Except for , all of the keys in the theme object map to one of Tailwind's core plugins. Since many plugins are responsible for CSS properties that only accept a static set of values (like float for example), note that not every plugin has a corresponding key in the theme object.

除了screens, colors, 以及spacing,主题对象中的所有字段都映射到Tailwind的核心插件之一。由于许多插件负责CSS属性,这些属性只接受一组静态值(例如float),请注意,并不是每个插件在theme对象中都有相应的字段。

所有这些字段也可以在theme.extend下使用。以便继承默认主题

KeyDescription
screensYour project's responsive breakpoints
colorsYour project's color palette
spacingYour project's spacing scale
animationValues for the animation property
backgroundColorValues for the background-color property
backgroundImageValues for the background-image property
backgroundOpacityValues for the background-opacity property
backgroundPositionValues for the background-position property
backgroundSizeValues for the background-size property
borderColorValues for the border-color property
borderOpacityValues for the border-opacity property
borderRadiusValues for the border-radius property
borderWidthValues for the border-width property
boxShadowValues for the box-shadow property
containerConfiguration for the container plugin
cursorValues for the cursor property
divideColorValues for the divide-color property
divideOpacityValues for the divide-opacity property
divideWidthValues for the divide-width property
fillValues for the fill property
flexValues for the flex property
flexGrowValues for the flex-grow property
flexShrinkValues for the flex-shrink property
fontFamilyValues for the font-family property
fontSizeValues for the font-size property
fontWeightValues for the font-weight property
gapValues for the gap property
gradientColorStopsValues for the gradient-color-stops property
gridAutoColumnsValues for the grid-auto-columns property
gridAutoRowsValues for the grid-auto-rows property
gridColumnValues for the grid-column property
gridColumnEndValues for the grid-column-end property
gridColumnStartValues for the grid-column-start property
gridRowValues for the grid-row property
gridRowStartValues for the grid-row-start property
gridRowEndValues for the grid-row-end property
transformOriginValues for the transform-origin property
gridTemplateColumnsValues for the grid-template-columns property
gridTemplateRowsValues for the grid-template-rows property
heightValues for the height property
insetValues for the top, right, bottom, and left properties
keyframesValues for the keyframes property
letterSpacingValues for the letter-spacing property
lineHeightValues for the line-height property
listStyleTypeValues for the list-style-type property
marginValues for the margin property
maxHeightValues for the max-height property
maxWidthValues for the max-width property
minHeightValues for the min-height property
minWidthValues for the min-width property
objectPositionValues for the object-position property
opacityValues for the opacity property
orderValues for the order property
outlineValues for the outline property
paddingValues for the padding property
placeholderColorValues for the placeholderColor plugin
placeholderOpacityValues for the placeholderOpacity plugin
ringColorValues for the ring-color property
ringOffsetColorValues for the ring-offset-color property
ringOffsetWidthValues for the ring-offset-width property
ringOpacityValues for the ring-opacity property
ringWidthValues for the ring-width property
rotateValues for the rotate plugin
scaleValues for the scale plugin
skewValues for the skew plugin
spaceValues for the space plugin
strokeValues for the stroke property
strokeWidthValues for the stroke-width property
textColorValues for the text-color property
textOpacityValues for the textOpacity plugin
transitionDurationValues for the transition-duration property
transitionDelayValues for the transition-delay property
transitionPropertyValues for the transition-property property
transitionTimingFunctionValues for the transition-timing-function property
translateValues for the translate plugin
widthValues for the width property
zIndexValues for the z-index property