Tailwind CSS 自定义配置 #

npx tailwindcss init
# 或创建完整配置
npx tailwindcss init --full

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 内容扫描路径
  content: ['./src/**/*.{html,js}'],
  
  // 主题配置
  theme: {
    extend: {},
  },
  
  // 插件
  plugins: [],
  
  // 核心插件
  corePlugins: {},
  
  // 变体
  variants: {},
  
  // 前缀
  prefix: '',
  
  // 重要选择器
  important: false,
  
  // 分隔符
  separator: ':',
}

module.exports = {
  theme: {
    // 扩展：保留默认值，添加新值
    extend: {
      colors: {
        brand: '#1da1f2',
      },
    },
    
    // 覆盖：完全替换默认值（不推荐）
    // colors: {
    //   brand: '#1da1f2',
    // },
  },
}

module.exports = {
  theme: {
    extend: {
      colors: {
        // 单个颜色
        brand: '#1da1f2',
        
        // 颜色调色板
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

<div class="bg-brand">品牌色</div>
<div class="bg-brand-500">品牌主色</div>

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: '#ffffff',
      black: '#000000',
      primary: '#3b82f6',
      secondary: '#6b7280',
    },
  },
}

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
}

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
}

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
}

<div class="tablet:text-lg">平板文字</div>

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'display': ['Helvetica Neue', 'sans-serif'],
        'body': ['Georgia', 'serif'],
        'mono': ['Fira Code', 'monospace'],
      },
      fontSize: {
        '2xs': ['0.625rem', { lineHeight: '0.75rem' }],
        '10xl': ['10rem', { lineHeight: '1' }],
      },
    },
  },
}

module.exports = {
  theme: {
    extend: {
      borderRadius: {
        '4xl': '2rem',
        '5xl': '2.5rem',
      },
    },
  },
}

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'inner-lg': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.1)',
        'brand': '0 0 20px rgba(59, 130, 246, 0.5)',
      },
    },
  },
}

module.exports = {
  theme: {
    extend: {
      animation: {
        'wiggle': 'wiggle 1s ease-in-out infinite',
        'fade-in': 'fadeIn 0.5s ease-in-out',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
      },
    },
  },
}

module.exports = {
  theme: {
    extend: {
      spacing: {
        '18': '4.5rem',
        '22': '5.5rem',
      },
    },
  },
}

module.exports = {
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
  },
}

module.exports = {
  corePlugins: {
    preflight: false,  // 禁用基础样式重置
    opacity: false,    // 禁用透明度工具
  },
}

module.exports = {
  prefix: 'tw-',
}

<div class="tw-bg-blue-500 tw-text-white">
  带前缀的类名
</div>

module.exports = {
  important: true,
  // 或指定选择器
  important: '#app',
}

module.exports = {
  content: [
    './src/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
}

module.exports = {
  safelist: [
    'bg-blue-500',
    'text-center',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
    },
  ],
}

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    plugin(function({ addUtilities, addComponents, theme }) {
      // 添加工具类
      addUtilities({
        '.text-shadow': {
          'text-shadow': '2px 2px 4px rgba(0, 0, 0, 0.1)',
        },
      })
      
      // 添加组件
      addComponents({
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
      })
    }),
  ],
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  
  darkMode: 'class',
  
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
    
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: '#ffffff',
      black: '#000000',
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        200: '#bfdbfe',
        300: '#93c5fd',
        400: '#60a5fa',
        500: '#3b82f6',
        600: '#2563eb',
        700: '#1d4ed8',
        800: '#1e40af',
        900: '#1e3a8a',
      },
    },
    
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      mono: ['Fira Code', 'monospace'],
    },
    
    extend: {
      spacing: {
        '128': '32rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
      },
    },
  },
  
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}