Skip to main content

TailwindCSS Version

TailwindCSS v4​

  • 会用新的特性
    • @layer, @property, color-mix(), @starting-style , anchor positioning, container queries
  • 移除
    • text-opacity-* -> text-{color}/*
    • flex-grow-* -> grow-*
    • decoration-slice -> box-decoration-slice
  • tailwind.config.js 可以不再需要，直接通过 css 配置
  • 默认不依赖 postcss
  • 拆分包 @tailwindcss/postcss, @tailwindcss/cli
  • 没有默认的 border 颜色 - 之前为 gray-200, 如果有主题需要注意重置颜色，现在不需要了，默认为 currentColor
  • ring 默认宽度 3px -> 1px
@import 'tailwindcss';

@theme {
  /* 增加 font-display  */
  --font-family-display: 'Satoshi', 'sans-serif';

  /* 增加 3xl: 前缀 */
  --breakpoint-3xl: 1920px;

  --color-neon-pink: oklch(71.7% 0.25 360);
  --color-neon-lime: oklch(91.5% 0.258 129);
  --color-neon-cyan: oklch(91.3% 0.139 195.8);

  /* reset */
  --color-*: initial;
}

扩展的方式

@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/utilities" layer(utilities);

vite plugin

vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

postcss

postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}

TailwindCSS v3.2​

  • 支持拆分配置导入
@config "./tailwind.admin.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;
  • @supports - supports-[backdrop-filter]:bg-black/25
  • aria-*
  • data-* - data-[size=large]:p-8
  • breakpoints 支持最大限制 - max-*:
  • 限定分组 - group-*,peer-*
<div class="group is-published">
  <div class="hidden group-[.is-published]:block">Published</div>
</div>
  • 插件 matchVariant 动态匹配
  • 嵌套分组
    • group/NAME
  • Container queries 
<div class="@container">
  <div class="block @lg:flex">
    <!-- ... -->
  </div>
</div>

TailwindCSS v3.1​

  • 新增任意选择符
    • [&:nth-child(3)]:py-0
    • [@supports(backdrop-filter:blur(0))]:bg-white/50
    • [&>*]:p-4
  • Typescript 配置类型
  • tailwindcss 命令行支持 import -i
  • theme 函数支持透明度 background-color: theme(colors.gray.100 / 50%);
  • 配置支持更方便的透明度
    • 之前 {primary: withOpacityValue('--color-primary')}
    • 现在 {primary: 'rgb(var(--color-primary) / <alpha-value>)'}
  • 新增 table 的 border-separate + border-spacing
  • 新增 enabled:, optional: 伪类前缀
  • 新增 contrast-more:, contrast-less:
  • dialog backdrop:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

TailwindCSS v3​

  • 默认 jit
  • Just-in-Time CDN build
  • 默认包含扩张颜色
  • aspect-ratio, accent-color, scroll-snap, scroll-behavior, text-indent
  • column break-before/inside/after
  • touch-action
  • will-change
  • border-x, border-y
  • file: - 文件上传按钮
  • open: - <details>, <dialog>
  • overflow-clip -> text-clip
  • overflow-ellipsis -> text-ellipsis
  • flex-basis
  • fit-content for min/max-width/height
  • min/max-content for min/max-height
  • cursor-*
  • 添加 grow-*, shrink-* 废弃 flex-grow-* and flex-shrink-*
  • text-decoration-color
  • addVariant API
  • print variant
  • 颜色 fill-*, stroke-*
<!-- 自定义配置 -->
<script src="https://cdn-tailwindcss.vercel.app/"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          tomato: 'tomato',
        },
      },
    },
  };
</script>
<style type="text/tailwindcss">
  body {
    @apply bg-pink-500;
  }
</style>
<!-- 插件 -->
<script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography,aspect-ratio,line-clamp"></script>
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 移除 */
/* @tailwind screens; */
@tailwind variants;
module.exports = {
  // mode: 'jit', // 默认
  // purge -> content
  // purge: ['./src/**/*.tsx'],
  content: ['./src/**/*.tsx'],
  // darkMode: false,// 移除 - 默认包含
  theme: {
    extend: {},
  },
  // variants: { },  // 移除 - 默认包含
  plugins: [],
};