tailwind使用手册（一）- 使用tailwind原子的几种方式

BarrySong4Real
290 阅读2分钟

使用tailwind原子的几种方式

在开始之前

本小册不会说原理只会说怎么运用tailwind。

并且只需要你会使用npm，pnpm，yarn，以及看得懂文档，了解基础的js/css/react/vue知识即可。

一些准备

选择一种自己喜欢的检验效果的方式

  • 使用tailwind官方的playground

  • 克隆该仓库使用react/vite开一个简单的项目

  • 打开tailwind 的文档，选择自己喜欢的技术栈，按照文档配置tailwind

如果是本地使用vscode的同学，可以安装一个tailwind插件Tailwind CSS IntelliSense

在className里面写原子class的时候会有智能提示。

把鼠标放在原子class上面可以快速查看原子的css转换。

img1

image.png

使用tailwind原子的几种方式

1. 直接使用设定好的原子

<h1 className="text-3xl font-bold underline">Hello world!</h1>

具体有哪些预设原子，大家可以在使用的过程中官网查询就行了，写多了自然就熟悉了。

2. 使用自定义数值原子

比如在上面代码里面的3xl,bold指的都是设定好的值（能符合大部分设计原则的数值）。

.text-3xl {
  font-size: 1.875rem /* 30px */;
  line-height: 2.25rem /* 36px */;
}
.font-bold {
  font-weight: 700;
}

但是我们想要设定font-size为27px呢？当然设定一个诡异的数值不好，这里只是举个例子。 一般情况下，我们都会设置自定义颜色，高度宽度的需求。 我们有原子w-3，h-3，text-white这种。 1721637498829.png 现在我们需要高度为223px，颜色为#ECF5F7

我们可以使用原子名-[原子值]的形式，如下

<h1 className="h-[223px] text-[#ECF5F7]">Hello world!</h1>

3. 直接使用css

使用[css代码]的形式可以直接像写css一样写单条css语法。

<h1 className="h-[223px] [color:red]">Hello world!</h1>

[color:red]直接转化为

.\[color\:red\] {
  color: red;
}

4. 任意语法[]

上面说到了[]不仅可以重新设置原子的数值，还可以设置单条样式。

其实[]被称为任意语法。

任意语法允许在需要时动态构建类名。这在处理复杂或非标准的样式时特别有用。

以下是一些使用任意语法的例子：

  • 任意属性值：

<div className="[--my-var:10px]">
  <div className="top-[var(--my-var)]">
    <!-- Content -->
  </div>
</div>
  • 任意属性：
<p className="[text-shadow:0_4px_8px_rgba(0,0,0,0.1)]">
  Text with custom shadow
</p>
  • 结合动态值：
<div className={`bg-[#${bgColor}]`}>
  <!-- Content -->
</div>
  • 媒体查询：
<div className="[@media(min-width:50px)]:bg-red-500">
  <!-- Content -->
</div>
  • 复杂的选择器：
<ul className="[&>li]:mt-2">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

当然任意语法不要过度使用，否者维护的时候只会让人头大。

5. 在css文件里面直接使用原子

使用@apply指令就可以直接使用原子

.some {
  @apply text-red-500;
}

现在你已经学会了基本的tailwind使用，非常简单。 以上都是针对单个原子或者单个样式，倘若我们需要设计一整套系统级别的样式，主题，我们还需要学习tailwind的配置文件tailwind.config.ts。

avatar
文章
阅读
粉丝