TailWindCss4.x版本功能详解TailwindCss4.x Tailwind CSS官网写在前面 1,使用前

TailwindCss4.x

继3.x版本后, TailwindCss4.x版本已经出来很久了,配置项和一些使用方法也和3.x版本有一些根本区别,所以,这里记录一下TailwindCss4.x的一些配置和使用方法

Tailwind CSS官网

目前国内的官网更新到了3.x版本,4.x的版本还没有同步更新,所以,访问需要切换到英文官网

写在前面

1,使用前,Vscode请安装Tailwind CSS IntelliSense插件,会提示对应的css类名,提高开发效率哦

2,如果项目配置了prettier,强烈建议使用prettier-plugin-tailwindcss来格式化Class的排序哦方便多人协作过程的格式问题;

3,tailwindcss所有的写法中,默认不需要带单位,很多都通过--space去计算,font相关的不是,带单位默认会按照带带单位最后生成相应的结果,和不带单位的要注意区分计算结果

安装

`vite`中使用

npm install tailwindcss @tailwindcss/vite

在vite.config.js中添加配置插件

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

在项目全局css文件中引入tailwindcss,这里可以根据项目选择是否需要引入默认的base和预设,如果搭配其他组件库,可以择优选择,如下默认全部引入

@import "tailwindcss"

如果不需要引入预设,可以按需引入对应的就好,如下, 注意, @layer这里申明了其工作的层级, 默认后面的会覆盖前面的, 所以, 申明顺序很重要;

@layer theme, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

注意⚠️: 预设其实是为了抹平不同浏览器之间的差异, 如果没有特殊需求和冲突,建议不需要关闭预设, 当然也可以自定义base和预设,如下

@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
  h2 {
    font-size: var(--text-xl);
  }
  h3 {
    font-size: var(--text-lg);
  }
  a {
    color: var(--color-blue-600);
    text-decoration-line: underline;
  }
}

`PostCSS`中使用

npm install tailwindcss @tailwindcss/postcss postcss

在postcss.config.js中添加配置插件

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

在全局Css中引入即可, (预设同上,就不再重复了)

@import "tailwindcss"

配置主题`Theme`

这里是配置Theme常用的一些配置

命名空间	实用类
`--color-*`	颜色实用程序，例如`bg-red-500`、、`text-sky-300`等等
`--font-*`	字体系列实用程序，例如`font-sans`
`--text-*`	字体大小实用程序，例如`text-xl`
`--font-weight-*`	字体粗细实用程序，例如`font-bold`
`--tracking-*`	字母间距实用程序，例如`tracking-wide`
`--leading-*`	行高实用程序，例如`leading-tight`
`--breakpoint-*`	响应式断点变体，例如`sm:*`
`--container-*`	容器查询变体`@sm:*`和大小实用程序`max-w-md`
`--spacing-*`	间距和大小实用程序，例如`px-4`、`max-h-16`等等
`--radius-*`	边框半径实用程序，例如`rounded-sm`
`--shadow-*`	盒子阴影实用程序，例如`shadow-md`
`--inset-shadow-*`	插入框阴影实用程序，例如`inset-shadow-xs`
`--drop-shadow-*`	阴影滤镜实用程序，例如`drop-shadow-md`
`--blur-*`	模糊滤镜实用程序，例如`blur-md`
`--perspective-*`	透视实用程序，例如`perspective-near`
`--aspect-*`	宽高比实用程序，例如`aspect-video`
`--ease-*`	过渡时间函数实用程序，例如`ease-out`
`--animate-*`	动画实用程序，例如`animate-spin`

1 配置`color`

3.x版本都在tailwind.config.js中配置,4.x版本将配置都放在了css中来配置,不再推荐在config中配置如下:

配置颜色, 以--color-*开头, 如下, tailwindcss会自动生成对应的颜色变量

@theme {
 --color-custom: #ff0000;
}

使用, 直接text-custom即可

<div>
  <h1 class="text-custom">Hello World</h1>
</div>

2 配置响应书断点

配置颜色, 以--breakpoint-*开头, 如下, tailwindcss会自动生成对应的颜色变量

@theme {
 --breakpoint-xs: 30rem;
 --breakpoint-2xl: 100rem;
 --breakpoint-3xl: 120rem;
}

使用请注意

  <div class="grid xs:grid-cols-2 3xl:grid-cols-6">
  <!-- ... -->

3 配置font

配置颜色, 以--font-*开头, 如下, tailwindcss会自动生成对应的颜色变量

@theme {
 --font-poppins: Poppins, sans-serif;
}

使用请注意

  <h1 class="font-poppins">This headline will use Poppins.</h1>
  <!-- ... -->

官方Theme配置地址

函数和指令

4.x版本中,主要改变比较多的是通过指令函数来处理之前config文件中的配置, 其中指令有如下,详情参考官方文档

| 指令 / 功能 | 说明 | | ---- | ---- | ---- | | @theme | 定义主题 | | @import | 导入 | | @source | 使用@source指令明确指定 Tailwind 自动内容检测未选取的源文件 | | @utility | 使用指令将与、和等@utility变体一起使用的自定义实用程序添加到您的项目中 | | @apply | 使用@apply指令将任何现有的实用程序类内联到您自己的自定义 CSS 中 | | @layer | 定义层 | | @variants | 定义变体 | | @config | 使用@config指令加载基于旧式 JavaScript 的配置文件 | | @plugin | 使用@plugin指令加载基于旧版 JavaScript 的插件 | | --alpha() | 使用该--alpha()函数调整颜色的不透明度 | | --spacing() | 使用该--spacing()函数根据您的主题生成间距值 |

下面挑几个常用的来举例说明用途和使用方法, @theme上面有提到,主要用来修改主题,就不再重复提了

1 `@import` 主要用来引入`css`文件包括`Tailwindcss`本身的

@import 'tailwindcss';
@import 'path/to/your/css';

2 `@source`

用于@source明确注册相对于样式表的源路径, Tailwind默认忽略以下文件查找

.gitignore您的文件中的文件
二进制文件，例如图像、视频或 zip 文件
CSS 文件
通用包管理器锁文件

要明确设置源检测的基本路径，请source()在 CSS 中导入 Tailwind 时使用该函数：

@import "tailwindcss" source("../src");

忽略特定路径

@source not "../src/components/legacy";

如果您想要明确注册所有源，请使用完全禁用自动源检测, 这样只会在指定目录去查找

@import "tailwindcss" source(none);
@source "../admin";
@source "../shared";

将特定实用程序列入安全列表

如果您需要确保 Tailwind 生成内容文件中不存在的某些类名，请使用@source inline()强制生成它们：

@import "tailwindcss" source(none);
@source "../admin";
@source "../shared";

生成的css

.underline {
  text-decoration: underline;
}

对应的, 如果不想生成某些类,可以明确排除类, 用@source not inline()防止生成特定类，即使在源文件中检测到它们：

@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");

4 配置`@components`

components对于您想要添加到项目中的任何更复杂的类，您仍希望能够使用实用程序类来覆盖它们。传统上，这些将是诸如card, 其实我觉得它是用来自定义一组样式的类名,像自定义一个button, img或者组件的集成样式,使用方法如下:

@layer components {
  .card {
    background-color: var(--color-white);
    border-radius: var(--rounded-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-xl);
  }
}

<div class='card' />

<!-- 如果要覆盖某一个属性,只需要在后面复写就好 -->
 <div class='card rounded-2xl' />

5 配置@apply

@apply指令将任何现有的实用程序类内联到您自己的自定义 CSS 中,它允许你将一组tailwindcss的utily在自定义成class里面,聚合成一个自定义成css类来使用,使用方法如下:

.selector {
  @apply rounded-b-lg shadow-md;
}

<div class='selector' />

6 配置`--alpha()`

--alpha()函数调整颜色的不透明度：使用方法如下

.selector {
  color: --alpha(var(--color-lime-300) / 50%);
}

<div class='selector' />

编译后得到

.selector {
  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}

7 配置@config

v4.0默认不需要config文件去配置theme,如果要使用,则在global css中通过@config去引入配置文件,这样就会加载进来了, 注意⚠️4.x不支持基于 JavaScript 的配置中的、corePlugins和safelist选项。separator

@config "../../tailwind.config.js";

8 配置@plugin

v4.plugin使用@plugin指令加载基于旧版 JavaScript 的插件：

@plugin "@tailwindcss/typography";

9 @utility

除了使用 Tailwind 自带的实用程序之外，您还可以添加自定义实用程序。当您想在项目中使用某个 CSS 功能，而 Tailwind 并未提供开箱即用的实用程序时，此功能会非常有用

使用@utility定义一个简单的content-auto类

@utility content-auto {
  content-visibility: auto;
}

//定义一个复杂的嵌套类
@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
}

使用

<div class="content-auto  scrollbar-hidden">
  <!-- ... -->
</div>

除了使用该@utility指令注册简单的实用程序之外，您还可以注册接受参数的功能实用程序, --value()采用特殊函数来解决效用值。


@theme {
  --tab-size-2: 2;
  --tab-size-4: 4;
  --tab-size-github: 8;
}

@utility tab-* {
  tab-size: --value(--tab-size-*);
}

这将匹配诸如tab-2、tab-4的类

上面是配合自定义theme, 用变量的形式去定义utility类,当然也可以直接去定义裸值的utility类, 下面只支持数字(integer)值类型,

@utility tab-* {
  tab-size: --value(integer);
}

这将匹配诸如tab-2、tab-4和tab-8的类。

如果要继承父类的值或者不设置值,类似于unset这种字符类型,也可以使用utility来设置

  @utility tab-* {
    tab-size: --value('inherit', 'initial', 'unset');
  }

这将匹配诸如tab-inherit、tab-initial和之类的实用程序tab-unset

上面演示了数字和字符类的utility设置,如果有需求,则可以直接使用utility来设置任何值,这种需要

  @utility tab-* {
    tab-size: --value([*]);
  }

这将匹配诸如tab-[1]和之类的实用程序tab-[76]。如果您想支持任何数据类型，可以使用--value([*])。

基于上面的规则,可以组合进行使用

@theme {
  --tab-size-github: 8;
}

@utility tab-* {
  tab-size: --value([integer]);
  tab-size: --value(integer);
  tab-size: --value(--tab-size-*);
}

负值

为了支持负值，请将单独的正值和负值实用程序注册到单独的声明中

@utility inset-* {
  inset: calc(var(--spacing) * --value([percentage], [length]));
}
@utility -inset-* {
  inset: calc(var(--spacing) * --value([percentage], [length]) * -1);
}

首先解释一下percentage, --spacing, length

percentage是百分比
--spacing是自定义的变量,默认是4px
length是长度值,例如px, em, rem等
calc是css3的calc函数,用于计算值,例如calc(1px + 2px), calc(100% - 50px)

使用

<div class="inset-2">inset-2</div>

其中--space默认等于4px=0.25rem, 所以,计算后得出inset: calc(4px * 2), 即inset: 8px

9.1 修饰符`--modifier()`

修饰符由函数处理，--modifier()该函数的工作原理与函数完全相同,下面举例说明使用方法

@utility text-* {
  font-size: --value(--text-*, [length]);
  line-height: --modifier(--leading-*, [length], [*]);
}

这里会生成font-size, line-height两个属性值,其中line-height值是被--modifier修饰的值,而--leading-*是通配符,可以匹配任意值,例如leading-1, leading-2等

<div class="text-2/2">inset-2</div>

最后生成的css

.text-2/2 {
  font-size: 8px;
  line-height: 8px;
}

下面这样写法和上面的写法略微不同,这两个写法最后都是一样的结果,但是和上面有区别,如果带了单位,那么最后得出的单位也是和当前写的单位是一致的,如果没带单位,那么最后得出的单位是--spacing * 2 的值,也就是8px,这里注意带单位和不带单位的区别,基本全部的规则都是这样,传入单位则按照传入的去计算,不传入则按照--spacing去动态计算

<div class="text-2px/2px">inset-2</div>
<div class="text-[2px]/[2px]">inset-2</div>

最后生成的css

.text-2/2 {
  font-size: 8px;
  line-height: 8px;
}

9.2 分数(CSS ratio)

为了处理分数，依赖 CSS ratio数据类型。如果与一起使用--value()，则会向 Tailwind 发出信号，将值和修饰符视为单个值

@utility aspect-* {
  aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);
}

其中--aspect-ratio-*是通配符,可以匹配任意值,例如aspect-1/1, aspect-16/9等

<div class="aspect-1/1">aspect-1/1</div>
<div class="aspect-16/9">aspect-16/9</div>

最后生成的css

.aspect-1/1 {
  aspect-ratio: 1 / 1;
}
.aspect-16/9 {
  aspect-ratio: 16 / 9;
}

写在最后

就更新到这里了,如果有错误,希望大家指正留言哦,

TailWindCss4.x版本功能详解

TailwindCss4.x

Tailwind CSS官网

写在前面

安装

vite中使用

PostCSS中使用

配置主题Theme

1 配置color

2 配置响应书断点

3 配置font

函数和指令

1 @import 主要用来引入css文件包括Tailwindcss本身的

2 @source

4 配置@components

5 配置@apply

6 配置--alpha()

7 配置@config

8 配置@plugin

9 @utility

9.1 修饰符--modifier()

9.2 分数(CSS ratio)

写在最后

`vite`中使用

`PostCSS`中使用

配置主题`Theme`

1 配置`color`

1 `@import` 主要用来引入`css`文件包括`Tailwindcss`本身的

2 `@source`

4 配置`@components`

6 配置`--alpha()`

9.1 修饰符`--modifier()`