配置

配置

Tailwind 安装配置和自定义的指南。

因为 Tailwind 是一个构建定制用户界面的框架，因此它从头开始就考虑了自定义。

默认情况下，Tailwind 会在项目的根目录中查找可选的 tailwind.config.js 文件，您可以在其中定义任何自定义内容。

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    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: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

配置文件的每个部分都是可选的，因此您只需要指定要更改的内容。任何缺失的部分都将回退到 Tailwind 的默认配置。

创建配置文件

使用安装 tailwindcss npm 包时包含的 Tailwind CLI 实用程序为您的项目生成一个 Tailwind 配置文件：

npx tailwindcss init

这将在您项目的根目录中创建一个最小的 tailwind.config.js 文件：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}