Windi CSS 配置

配置 Windi CSS

Windi CSS 中的配置與您在 Tailwind CSS 中的預(yù)期類(lèi)似，但具有更多增強(qiáng)功能和功能。

如果您要從 Tailwind 遷移，請(qǐng)先查看遷移指南。

配置文件

默認(rèn)情況下，Windi CSS 將在您項(xiàng)目的根目錄下搜索配置文件。有效的文件名是：

• ?windi.config.ts?
• ?windi.config.js?
• ?tailwind.config.ts?
• ?tailwind.config.js?

本機(jī) ES 模塊和 TypeScript 開(kāi)箱即用，由 Sucrase 提供支持。

要對(duì)您的配置進(jìn)行類(lèi)型檢查，您可以從 ?windicss/helpers? 導(dǎo)入 ?defineConfig? 函數(shù)：

?windi.config.ts?

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  /* configurations... */
})

?windi.config.js?

// @ts-check - enable TS check for js file
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  /* configurations... */
})

defineConfig 是一個(gè)帶有類(lèi)型提示的繞過(guò)函數(shù)，這意味著如果您不需要自動(dòng)完成/類(lèi)型檢查，您也可以省略它。

?windi.config.js?

export default {
  /* configurations... */
}

您可以使用編輯器中的自動(dòng)完成功能來(lái)查看可能的配置字段。功能的定制將在相應(yīng)的頁(yè)面中描述。

示例配置

windi.config.js

import { defineConfig } from 'windicss/helpers'
import colors from 'windicss/colors'
import plugin from 'windicss/plugin'

export default defineConfig({
  darkMode: 'class', // or 'media'
  theme: {
    extend: {
      screens: {
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
      },
      colors: {
        blue: colors.sky,
        red: colors.rose,
        pink: colors.fuchsia,
      },
      fontFamily: {
        sans: ['Graphik', 'sans-serif'],
        serif: ['Merriweather', 'serif'],
      },
      spacing: {
        128: '32rem',
        144: '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [
    plugin(({ addUtilities }) => {
      const newUtilities = {
        '.skew-10deg': {
          transform: 'skewY(-10deg)',
        },
        '.skew-15deg': {
          transform: 'skewY(-15deg)',
        },
      }
      addUtilities(newUtilities)
    }),
    plugin(({ addComponents }) => {
      const buttons = {
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-blue': {
          'backgroundColor': '#3490dc',
          'color': '#fff',
          '&:hover': {
            backgroundColor: '#2779bd',
          },
        },
        '.btn-red': {
          'backgroundColor': '#e3342f',
          'color': '#fff',
          '&:hover': {
            backgroundColor: '#cc1f1a',
          },
        },
      }
      addComponents(buttons)
    }),
    plugin(({ addDynamic, variants }) => {
      addDynamic('skew', ({ Utility, Style }) => {
        return Utility.handler
          .handleStatic(Style('skew'))
          .handleNumber(0, 360, 'int', number => `skewY(-${number}deg)`)
          .createProperty('transform')
      }, variants('skew'))
    }),
    require('windicss/plugin/filters'),
    require('windicss/plugin/forms'),
    require('windicss/plugin/aspect-ratio'),
    require('windicss/plugin/line-clamp'),
    require('windicss/plugin/typography')({
      modifiers: ['DEFAULT', 'sm', 'lg', 'red'],
    }),
  ],
})