Tailwind CSS - 预设

Tailwind CSS 预设允许您创建自己的可重用配置预设。

当您将自己的配置添加到 tailwind.config.js 时，它会与默认配置合并。您的更改会覆盖或添加到默认设置。

presets 选项允许您使用不同的基础配置，从而可以轻松地在多个项目中重用自定义设置。

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-base')
  ],
  // ...
}

创建预设

预设与您放在 tailwind.config.js 文件中的自定义设置相同。

// Example preset
module.exports = {
    theme: {
    colors: {
        blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
        },
        pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
        },
        gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
        }
    },
    fontFamily: {
        sans: ['Graphik', 'sans-serif'],
    },
    extend: {
        flexGrow: {
        2: '2',
        3: '3',
        },
        zIndex: {
        60: '60',
        70: '70',
        80: '80',
        90: '90',
        100: '100',
        },
    }
    },
    plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    ],
}

要使用预设，请将其添加到项目的 tailwind.config.js 文件的“presets”部分。

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('./my-preset.js')
    ],
    // Customizations specific to this project would go here
    theme: {
    extend: {
        minHeight: {
        48: '12rem',
        }
    }
    },
}

预设通常会添加到 Tailwind 的默认值中。要从头开始，请添加一个空的“presets”键以覆盖默认值。

// Example preset
module.exports = {
    presets: [],
    theme: {
    // ...
    },
    plugins: [
    // ...
    ],
}

深入合并逻辑

项目特定的配置（在 tailwind.config.js 中）与预设合并，就像它们与默认设置合并一样。

tailwind.config.js 中的以下选项如果在预设中存在，则只会替换相同的选项

• content
• darkMode
• prefix
• important
• variantOrder
• separator
• safelist

其余选项以对每个选项都有意义的方式合并，下面将详细解释。

主题

组合主题设置时，tailwind.config.js 会替换预设设置。但扩展设置会从所有来源合并并添加到顶部。

预设

预设可以嵌套，这意味着一个预设可以包含另一个预设，依此类推。

插件

预设插件与项目插件合并。这意味着您无法禁用预设添加的插件。如果您想禁用预设插件，请将其从预设中移除，并将其添加到各个项目中。

核心插件

corePlugins 选项的行为取决于您是将其配置为对象还是数组。

module.exports = {
    // ...
    corePlugins: {
        float: false,
    },
    }

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('./my-preset.js'),
    ],
    // This configuration will be merged
    corePlugins: {
    cursor: false
    }
}

如果将 corePlugins 配置为数组，它将替换配置的预设提供的任何 corePlugins 配置。

module.exports = {
    // ...
    corePlugins: {
        float: false,
    },
    }

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('./example-preset.js'),
    ],
    // This will replace the configuration in the preset
    corePlugins: ['float', 'padding', 'margin']
}

扩展多个预设

Presets 是一个包含多个自定义的数组，可以轻松地重用和组合它们。

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('@acmecorp/tailwind-colors'),
    require('@acmecorp/tailwind-fonts'),
    require('@acmecorp/tailwind-spacing'),
    ]
}

当多个预设重叠时，最后一个应用的预设优先。

例如，如果这两个配置都提供了一个自定义调色板（并且没有使用 extend），则将使用配置 b 中的调色板

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('@acmecorp/configuration-a'),
    require('@acmecorp/configuration-b'),
    ]
}

禁用默认配置

禁用默认值 要从头开始，请将 presets 设置为空数组。这将删除所有 Tailwind 的默认设置，包括颜色、字体和间距。

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [],
    // ...
}

您还可以创建一个独立的设计系统在预设中。

module.exports = {
    presets: [],
    // ...
    }

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [
    require('./my-preset.js')
    ],
    // ...
}