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

列印頁面