Tailwind CSS 1.5 发布：Just-In-Time 模式的雏形

Tailwind CSS 1.5 引入了多个实用特性，为后来的 JIT 模式奠定了基础。

新增特性

响应式变体顺序

支持任意断点的响应式前缀：

<div class="sm:hover:bg-blue-500 md:active:bg-red-500">
  复杂的响应式交互
</div>

深色模式支持

<div class="bg-white dark:bg-gray-800">
  <!-- 自动跟随系统 -->
</div>

配置方式：

// tailwind.config.js
module.exports = {
  darkMode: 'media', // 跟随系统
  // darkMode: 'class', // 手动切换
}

Grid 布局增强

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid grid-rows-2 grid-flow-col gap-2">
  <!-- 更灵活的布局 -->
</div>

环形工具

<button class="ring ring-blue-500">
  聚焦环
</button>

<button class="ring-2 ring-offset-2 ring-blue-500">
  带偏移的聚焦环
</button>

自定义配置

扩展默认主题

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#ff6b00',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

插件系统

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.text-shadow': {
          'text-shadow': '2px 2px 4px rgba(0,0,0,0.1)',
        }
      })
    })
  ]
}

性能考虑

此时的 Tailwind 仍使用传统的清除未使用样式方式：

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.html', './src/**/*.js'],
}

JIT 模式将在后续版本登场。

升级建议

npm install tailwindcss@latest