Tailwind CSS - 预设

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

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

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

/** @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']
}

扩展多个预设

预设是一个包含多个自定义项的数组，可轻松重用和组合它们。

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

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

例如，如果这两个配置都提供了自定义调色板(并且未使用扩展)，则将使用配置 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')
    ],
    // ...
}