Tailwind CSS - 主题配置

Tailwind CSS 主题配置用于指定项目的主题。

在"tailwind.config.js"中，"Theme"部分允许您定义项目的调色板、字体比例、字体、断点、边框半径值等。

/** @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"的"Theme"部分包含一系列键，例如"screens"、"colors"、"spacing"和"core plugin"，可用于自定义。

Screens

"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

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

名称将成为类名，值将设置样式。这将创建类似 rounded 的类。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">
此脚本使用 Oswald 字体
</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') 来为间距比例中的每个值生成 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 的核心插件匹配。某些插件没有主题键，因为它们只接受固定值。您还可以使用 theme.extend 键扩展默认主题。

所有这些键也可在 theme.extend 键下使用，以启用扩展默认主题的功能。