如何配置Tailwind CSS v4全局类及自定义响应式hover类？

1. 手动创建配置文件并设置全局样式 #

Tailwind CSS v4.0 不再自动生成配置文件，你需要在项目根目录手动创建 tailwind.config.js（或 .ts）。全局样式可通过 theme.extend 扩展主题，或借助插件的 addBase 方法配置基础样式：

全局样式配置示例 #

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // 扩展全局颜色、字体等主题属性
      colors: {
        primary: '#2563eb',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
  // 配置全局基础样式（如重置默认元素样式）
  plugins: [
    function({ addBase }) {
      addBase({
        'body': { margin: 0, padding: 0, lineHeight: '1.5' },
        'h1': { fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: '700' },
      })
    }
  ],
}

2. 配置容器类xl断点的max-width #

容器类在v4.0文档中未明确标注，但仍可通过配置自定义断点宽度：

在 tailwind.config.js 的 theme.extend.container 中设置：

export default {
  // ...其他配置
  theme: {
    extend: {
      container: {
        screens: {
          xl: '1280px', // 设定xl断点下容器的max-width为1280px
          '2xl': '1440px', // 可按需添加其他断点配置
        },
        padding: {
          DEFAULT: '1rem',
          xl: '2rem', // 可选：设置xl断点下容器的内边距
        },
      },
    },
  },
}

3. 添加带响应式及hover效果的自定义类 #

有两种方式实现，可根据需求选择：

方式1：通过theme.extend直接定义 #

export default {
  // ...其他配置
  theme: {
    extend: {
      utilities: {
        '.custom-btn': {
          padding: '0.5rem 1rem',
          borderRadius: '0.375rem',
          backgroundColor: '#2563eb',
          color: 'white',
          transition: 'background-color 0.2s',
        },
        '.custom-btn:hover': {
          backgroundColor: '#1d4ed8',
        },
        // 响应式变体：md及以上屏幕的样式
        '@screen md': {
          '.custom-btn': {
            padding: '0.75rem 1.5rem',
            fontSize: '1.125rem',
          },
        },
      },
    },
  },
}

方式2：用插件的addUtilities实现（更灵活） #

export default {
  // ...其他配置
  plugins: [
    function({ addUtilities, theme }) {
      const newUtilities = {
        '.custom-btn': {
          padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
          borderRadius: theme('borderRadius.md'),
          backgroundColor: theme('colors.blue.600'),
          color: theme('colors.white'),
          transition: 'background-color 0.2s ease',
        },
        '.custom-btn:hover': {
          backgroundColor: theme('colors.blue.700'),
        },
      }
      // 启用响应式、hover变体
      addUtilities(newUtilities, {
        variants: ['responsive', 'hover'],
      })
    }
  ],
}

使用时直接在HTML中调用类名即可：

<button class="custom-btn">点击按钮</button>

该类会自动在md及以上屏幕应用更大的内边距和字体，hover时背景色加深。

内容的提问来源于stack exchange，提问作者miyen