为什么Tailwindcss在开发者中如此受欢迎？揭秘背后的原因！

1.邂逅 tailwindcss

我们平时写 css 样式是这样的：AxE28资讯网——每日最新资讯28at.com

<template>  <div class="zhifou">    <p>好好学习</p>    <p>天天向上</p>  </div></template><script setup></script><style lang="scss" scoped>.zhifou {  margin: auto;  width: 600px;  height: 300px;  background-color: blue;  font-size: 20px;}</style>

后来随着前端技术的发展，原子化 CSS 出现了。原子化 CSS 是一种 CSS 框架。AxE28资讯网——每日最新资讯28at.com

在原子化 CSS 中，CSS 组件被拆分为更小的部分，这些部分可以独立地编辑、测试和重用。这些原子通常是单个像素或极其微小的变化，例如颜色、大小、位置等。AxE28资讯网——每日最新资讯28at.com

原子化 CSS 有助于减少代码量，提高代码的可维护性和可重用性。AxE28资讯网——每日最新资讯28at.com

原子化 CSS 写法：AxE28资讯网——每日最新资讯28at.com

<div class="w-10 h-10 bg-red-100 text-10">    <p>好好学习</p>    <p>天天向上</p>  </div>

原子化 CSS 框架更像是一个已经封装好的 CSS 工具类。AxE28资讯网——每日最新资讯28at.com

例如：我们在类选择器中写了 w-[10px]，原子化 CSS 框架经过扫描，将 w-[10px] 扫描成AxE28资讯网——每日最新资讯28at.com

width:10px;

也就是说，我们只要按照这个框架的要求去任意组合，框架最后一扫描，就能生成我们想要的 CSS 样式。这样会大大减少代码量，提高工作效率。AxE28资讯网——每日最新资讯28at.com

而本文介绍的 tailwindcss 就是市面上非常热门的原子化 CSS 框架。AxE28资讯网——每日最新资讯28at.com

tailwindcss 中文网AxE28资讯网——每日最新资讯28at.com

https://www.tailwindcss.cn/

图片AxE28资讯网——每日最新资讯28at.com

4. tailwindcss 常用方法

4.1 设置宽高

1.w-[ ]，h-[ ] 设置任意宽高

<template>  <div>    <div class="bg-blue-600 w-[200px] h-[100px]">      <p>好好学习</p>      <p>天天向上</p>    </div>    <div class="bg-red-600 w-[20rem] h-[10rem]">      <p>好好学习</p>      <p>天天向上</p>    </div>  </div></template><script setup></script><style lang="scss" scoped></style>

图片AxE28资讯网——每日最新资讯28at.com

4.7 定位

• relative 表示 position: relative;
• absolute 表示 position: absolute;
• fiexed 表示 position: fiexed;
• z-1 表示 z-index:1;

数值：1 表示 4pxAxE28资讯网——每日最新资讯28at.com

• top-1 表示 top: 4px;
• left-2 表示 left: 8px;
• right-10 表示 right: 40px;
• bottom-3 表示 bottom: 12px;

任意值：AxE28资讯网——每日最新资讯28at.com

• top-[5px]
• left-[10rem]
• right-[20px]
• bottom-[100px]

例：AxE28资讯网——每日最新资讯28at.com

<div  class="bg-blue-600 w-[300px] h-[300px] hover:bg-red-300 fixed bottom-[20px] left-[100px]">  <p class="font-bold text-yellow-400">好好学习</p>  <p>天天向上</p></div>

图片AxE28资讯网——每日最新资讯28at.com

4.8 flex 布局

• flex 表示 display: flex;
• flex-row 表示 flex-direction: row;
• flex-col 表示 flex-direction: column;
• justify-center 表示 justify-content: center;
• items-center 表示 align-items: center;
• flex-wrap 表示换行
• flex-nowrap 表示不换行
• flex-1 表示 flex:1;

例：AxE28资讯网——每日最新资讯28at.com

<div  class="bg-blue-600 w-[300px] h-[300px] flex flex-row justify-center items-center ">  <p class="bg-yellow-400 w-[100px] h-[100px] text-white-400">好好学习</p>  <p class="bg-red-400 w-[100px] h-[100px] text-white-400">天天向上</p></div>

图片AxE28资讯网——每日最新资讯28at.com

4.9 样式复用

下面的例子中 p 标签有重复的样式AxE28资讯网——每日最新资讯28at.com

<div  class="bg-blue-600 w-[300px] h-[300px] flex flex-row justify-center items-center flex-wrap">  <p class="bg-red-400 w-[100px] h-[100px] text-white text-[20px]">好好学习</p>  <p class="bg-yellow-400 w-[100px] h-[100px] text-white text-[20px]">天天向上</p></div>

如果遇到重复的样式，我们可以借助 @layer 和 @apply 指令定义全局复用的样式：AxE28资讯网——每日最新资讯28at.com

1.在 TailwindCSS 的样式文件中定义复用样式AxE28资讯网——每日最新资讯28at.com

图片AxE28资讯网——每日最新资讯28at.com

@layer components {  .title {    @apply w-[100px] h-[100px] text-white text-[20px];  }}

2.在类选择器中使用复用类名AxE28资讯网——每日最新资讯28at.com

<p class="title">好好学习</p><p class="title">天天向上</p>

AxE28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-112771-0.html为什么Tailwindcss在开发者中如此受欢迎？揭秘背后的原因！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 2024年了，为什么 CSS 预处理器依然火爆？

下一篇： 如何利用CSS实现三角形、扇形、聊天气泡框