Tailwind CSS

于 2024-02-04 19:21:30 发布
阅读量1.5k 收藏 13
点赞数 25
分类专栏： 开发 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28838891/article/details/136027360
版权

目录

引入原因：

css增长，样式错乱

调试

规范：在class上原子化css 

特点：把class当行内style动态属性用

优点

不用命名样式

不用想并不重要的CSS变量名

缺少命名逻辑

不用撰写维护和模板【对应的独立css块】

不用不停滚动屏幕切换鼠标光标位置【vue】

打包后的css文件占用空间变小：因为在class上原子化css

CSS文件占比小（几kb），不用优化

插件：自带各种类名提示

类型长且重复多次： @layer @apply指令扩展

​编辑

类名的命名规则

参考链接

安装 - TailwindCSS中文文档 | TailwindCSS中文网

中文更友好：

Tailwind CSS 中文网

扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件

引入原因：

css增长，样式错乱

多个 class 里都包含了类似的样式，但你需要写多次，css 会一直增长

css 没有模块作用域，所以可能你在这里加了一个样式，结果别的地方样式错乱了。

调试

在 chrome devtools 里可以直接看到有啥样式，而且样式之间基本没有交叉，很容易调试：

之前写法容易多个 class 的样式相互覆盖，还要确定优先级和顺序

规范：在class上原子化css 

 「Atomic/Utility-First CSS」是和「Semantic CSS 」(语义化 CSS ) 相对的一种 CSS 规范。

原子 class 样式是只是作用在某个 html 标签的

特点：把class当行内style动态属性用

优点

不用命名样式

不用想并不重要的CSS变量名

缺少命名逻辑

不用撰写维护和模板【对应的独立css块】

不用不停滚动屏幕切换鼠标光标位置【vue】

打包后的css文件占用空间变小：因为在class上原子化css

CSS文件占比小（几kb），不用优化

插件：自带各种类名提示

插件名：Tailwind CSS IntelliSense

类型长且重复多次： @layer @apply指令扩展

类名的命名规则

1.布局类：


2.flex: 相当于 display: flex;
3.grid: 相当于 display: grid;
4.justify-between: 相当于 justify-content: space-between;
5.items-center: 相当于 align-items: center;


6.间距和尺寸类：


7.m-4: 相当于 margin: 1rem;
8.p-2: 相当于 padding: 0.5rem;
9.w-1/2: 相当于 width: 50%;
10.h-8: 相当于 height: 2rem;


11.文本和颜色类：


12.text-lg: 相当于 font-size: 1.125rem;
13.text-blue-500: 相当于 color: #4299e1;

常见的文本大小类：

  • text-xs: 额外小
  • text-sm: 小
  • text-base: 基础（默认大小）
  • text-lg: 大
  • text-xl: 额外大
  • text-2xl: 双倍额外大
  • text-3xl: 三倍额外大
  • text-4xl: 四倍额外大
  • text-5xl: 五倍额外大
  • text-6xl: 六倍额外大
  • rounded-sm: 小圆角，比较小的圆角样式。
  • rounded: 中等圆角，是默认的圆角样式。
  • rounded-md: 中等圆角，稍大于默认圆角。
  • rounded-lg: 大圆角，相对较大的圆角样式。
  • rounded-xl: 非常大的圆角，比 rounded-lg 更大。
  • rounded-full: 完全圆角，将元素变成圆形。


14.响应式类：


15.lg:flex: 在大屏幕上应用 flex 样式。
16.sm:w-full: 在小屏幕上应用 width: 100%; 样式。

Tailwind CSS 的类名遵循一种基于功能和直观的命名规律。以下是一些常见的规律：

1.基础形式： 类名通常由一个或多个单词组成，描述了一个具体的样式或功能。

   <!-- 示例：字体大小 -->
   <p class="text-lg">This is a paragraph.</p>


2.缩写： 为了简化和提高可读性，Tailwind 使用缩写形式的类名。

   <!-- 示例：边距和内边距 -->
   <div class="m-4 p-2">Content</div>


3.组合类名： 你可以组合多个类名以应用多个样式。

   <!-- 示例：组合类名 -->
   <div class="flex items-center space-x-4">
     <!-- ... -->
   </div>


4.变体类名： 使用响应式前缀和状态类名可以根据屏幕大小或状态应用样式。

   <!-- 示例：响应式和状态类名 -->
   <div class="lg:flex hover:bg-gray-200">
     <!-- ... -->
   </div>


5.颜色和尺寸： 颜色和尺寸类名通常包含有关样式的信息。

   <!-- 示例：颜色和尺寸类名 -->
   <button class="bg-blue-500 text-white p-2">Click me</button>

总体而言，Tailwind CSS 的命名规律强调清晰、简洁和功能导向。这种直观的命名风格使得在 HTML 文件中阅读和理解样式更加容易。

参考链接

TailwindCSS的使用，看这一篇就够了！ - 掘金

一次就能看懂的Tailwind CSS介绍 - 掘金

UnoCSS给了我一个不用tailwindcss的理由 - 掘金

为什么真的有人讨厌 TailWindCSS ? - 掘金

快速掌握 Tailwind：最流行的原子化 CSS 框架 - 掘金

参宿7
关注
  • 25
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Tailwind CSS 入门
步子哥的博客
12-17 228
在本课程中，我们介绍了 Tailwind CSS 的基本概念和使用方法，以及一些进阶使用方法。Tailwind CSS 提供了大量的预定义实用类，但我们也可以根据自己的需要来自定义实用类。Tailwind CSS 提供了一些插件，可以扩展 Tailwind CSS 的功能。Tailwind CSS 是一个 CSS 框架，它提供了大量的预定义实用类，可以用来快速构建 HTML 页面。Tailwind CSS 提供了大量的预定义实用类，可以用来设置元素的颜色、大小、位置、边框、动画等样式。
tailwindcss-gradients:Tailwind CSS插件可生成渐变背景实​​用程序
05-02
黑人的命也是命 意识到。 生气。 做得更好。 需求变化。 尽一切可能显示您的支持。 单击上面的链接以查找抗议，请愿书和其他帮助方法。 不要让它变得安静。 Tailwind CSS的渐变插件 要求 此插件需要Tailwind CSS 1.2或更高版本。 如果您的项目使用的是较早版本的Tailwind，则应安装此插件的最新2.x版本（ npm install tailwindcss-gradients@2.x ）。 安装 npm install tailwindcss-gradients 用法 简单的 { theme : { colors : { 'red' : '#f00' , 'blue' : '#00f' , } , linearGradientColors : theme => theme ( 'colors' ) , rad
tailwindcss-typography:Tailwind CSS插件生成排版工具和文本样式组件
05-02
黑人的命也是命 意识到。 生气。 做得更好。 需求变化。 尽一切可能显示您的支持。 单击上面的链接以查找抗议，请愿书和其他帮助方法。 不要让它变得安静。 Tailwind CSS的版式插件 要求 此插件需要Tailwind CSS 1.2或更高版本。 如果您的项目使用的是较早版本的Tailwind，则应安装此插件的最新2.x版本（ npm install tailwindcss-typography@2.x ）。 安装 npm install tailwindcss-typography 用法 // tailwind.config.js module . exports = { theme : { textIndent : { // defaults to {} '1' : '0.25rem' , '2' : '0.5rem' , } ,
tailwindcss-scrollbar:Tailwindcss插件来自定义浏览器滚动条
05-13
tailwindcss-滚动条 Tailwindcss插件可自定义浏览器滚动条。 安装 # Using npm npm install -D @gradin/tailwindcss-scrollbar # Using Yarn yarn add -D @gradin/tailwindcss-scrollbar 然后将插件添加到tailwind.config.js文件。 module . exports = { theme : { // ... } , plugins : [ require ( '@gradin/tailwindcss-scrollbar' ) , ] , } 配置 您可以自定义滚动条的大小和颜色。 module . exports = { theme : { // ... } , plugins : [
tailwindcss-aspect-ratio:用于tailwindcss框架的宽高比插件
05-02
Tailwind CSS的高宽比插件 要求 此插件需要Tailwind CSS 1.2或更高版本。 如果您的项目使用的是较早版本的Tailwind，则应安装此插件的最新2.x版本（ npm install tailwindcss-aspect-ratio@2.x ）。 安装 npm install tailwindcss-aspect-ratio 用法 该插件在Tailwind配置的theme和variants对象中使用aspectRatio键来生成宽高比实用程序。 这是一个例子： // tailwind.config.js module . exports = { theme : { aspectRatio : { // defaults to {} 'none' : 0 , 'square' : [ 1 , 1 ] , // or 1 / 1, o
tailwindcss-pseudo-elements:TailwindCSS插件，添加伪元素的变体
03-07
tailwindcss-pseudo-elements TailwindCSS插件，添加伪元素的变体（ ::before ， ::after ， ::first-letter等）。 用法 安装 NPM npm install tailwindcss-pseudo-elements --save-dev 纱 yarn add tailwindcss-pseudo-elements -D 配置 const plugin = require ( 'tailwindcss/plugin' ) module . exports = { variants : { extend : { textColor : [ 'responsive' , 'hover' , 'focus' , 'before' ,
TailwindCSS常用类大全
delete_you的博客
04-05 3975
简要介绍tailwindcss常用类，助力快速构建优雅的前端页面
使用 Tailwind CSS 自定义基础样式层
步子哥的博客
10-06 527
然后说明可以通过 “@apply” 指令应用 Tailwind CSS 中现有的样式值,或者通过 “theme” 函数获取在 tailwind.config.js 中配置的主题值。注释还解释了 “@layer base” 中定义的样式,如果没有被使用的话,会在编译后被删除。首先在注释中说明了这段代码的作用是添加自定义的基础样式层,用于覆盖 Tailwind CSS 中默认的一些基础样式。通过 “@apply” 和 “theme” 引用了 Tailwind CSS 的样式值。
前端CSS框架之Tailwindcss之动态类名
weixin_54931655的博客
07-07 1209
在使用Tailwind CSS时，有一个常见的问题是无法动态生成类名，需要手动添加类名来实现特定的UI效果。这可能会导致类名过多，增加了代码的复杂度。在这个示例代码中，我们使用了"line-clamp-[5]“这个类名，并将数字5替换成了一个动态的值。在Tailwind CSS的JIT编译模式下，这个类名会被动态生成成"line-clamp-5”，从而实现了文本截断并显示省略号的效果。例如，为了实现文本截断并显示省略号的效果，可以使用"line-clamp-[5]"这个类名，其中的数字5可以动态生成。
tailwindcss 一览表
樊小书生
11-14 2472
tailwindcss 包含丰富的样式定义，且支持自由配置，可在项目中统一使用，减少 css 定义，将 css 声明写入 html ，查看 html 代码即可知道 css 样式。
简洁高效的样式编写：揭秘Tailwind CSS
最新发布
会思想的苇草i的博客
10-08 2711
Tailwind CSS是一种实用的CSS框架，通过提供一组原子类，使得构建用户界面更加高效。它不同于传统的CSS框架，可以让你直接在HTML中使用类来定义样式，而无需编写自定义的CSS。Tailwind CSS提倡快速开发和一致的UI设计，同时也支持自定义主题和扩展性。这使得它成为许多开发者喜爱的工具，特别是对于快速原型设计和快速迭代的项目。
Javascript基础(3)
luli007x的博客
06-14 156
96,97,101,103,108,111,113,114,115,120(2),124,125 WebAPIS 1.Web API基本认知 1.1const let 和 const中 建议const优先声名 const arr=['red','pink','blue'] arr=[1,2,3] console.log(arr)//报错同对象 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ujc1pySj-1686756418489)(…/…/…/…/…/…/vscode
tailWindCSS
ysj1218的博客
03-25 1472
TailWindCSS是什么？ 是一个功能类优先的CSS框架，能直接在便签中组合使用，构建页面需要的样式。 那么有什么用呢？ 不需要离开html即可快速构建想现代网络 生产环境体积非常小：在构建过程中会自动删除无用的css 可以构建想要的各种样式，不用写一堆样式代码，加快开发速度 是响应式的 支持hover和focus状态 在vue项目中使用 TailwindCSS 1. 首先创建项目，这里我们创建一个Vite项目 npx create-vite-app vite-app cd vi
TailWind CSS
m0_61246261的博客
06-25 667
只需书写HTML代码，无需书写CSS，即可快速构建美观的网站。
class命名（及前端命名）
Li5306的博客
06-16 715
常见class关键词： 布局类：header, footer, container, main, content, aside, page, section 包裹类：wrap, inner 区块类：region, block, box 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span 列表类：list, item, field 主次类：primary, secondary, sub, minor 大小类
面向对象----类（class）
qq_59378215的博客
08-09 1168
1、声明类的语法格式： 【修饰符】 class 类名{ 成员列表 } （1）【修饰符】后面一一讲解，比如：public（公共的）等，也可以缺省/省略。 如果一个类前面加了public，就要求.java源源文件名 必须 与这个类名一致。 意思就是说：public class TestClass{..} 这个类必须在 TestClass.java文件中，否则就报错。 换句话说，一个.java源文件中，不能同时出现两个pub...
Tailwind CSS功能类优先
m0_56699208的博客
07-31 692
使用backgroundcolor,borderradius,和box-shadow功能类(bg-white,rounded-xl,和shadow-md)设置卡片的外观样式。使用fontsize，textcolor，和font-weight功能类(text-xl，text-black，font-medium等等)给卡片文字设置样式。使用max-width和margin功能类(max-w-sm和mx-auto)来设置卡片的宽度和水平居中。...
Tailwind教程2 - 基础样式
wzy1935的博客
05-27 2977
Tailwind教程2 - 基础样式 这节讲一讲日常经常使用的基础样式，来实现一个文件夹的样式的标签页： 基础模板如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn
毛玻璃 taiwindcss dock组件
05-05
毛玻璃效果可以通过使用 `backdrop-filter` 属性来实现，而 TaiwindCSS 中也提供了 `backdrop-blur` 类来快速实现毛玻璃效果。下面是一个例子： ```html <div class="relative"> <div class="absolute inset-0 bg-gray-900 opacity-50"></div> <div class="absolute inset-0 backdrop-blur-lg"></div> <div class="relative z-10 p-4 bg-white rounded-lg shadow-lg"> <!-- 内容区域 --> </div> </div> ``` 其中，`backdrop-blur-lg` 类用于设置毛玻璃的模糊程度，`bg-gray-900 opacity-50` 类用于设置背景的颜色和透明度，`z-10` 类用于设置内容区域的层级。这里使用了相对定位和绝对定位来实现背景和内容区域的叠加。 至于 Dock 组件，TaiwindCSS 中并没有现成的组件可以直接使用。不过，你可以通过使用 Flex 布局和一些 CSS 样式来实现一个 Dock 组件。下面是一个例子： ```html <div class="flex justify-center fixed bottom-0 w-full h-16 bg-gray-900"> <div class="flex items-center justify-center w-16 h-16 rounded-full bg-white text-gray-900 mx-2"> <i class="fas fa-home"></i> </div> <div class="flex items-center justify-center w-16 h-16 rounded-full bg-white text-gray-900 mx-2"> <i class="fas fa-search"></i> </div> <div class="flex items-center justify-center w-16 h-16 rounded-full bg-white text-gray-900 mx-2"> <i class="fas fa-bell"></i> </div> <div class="flex items-center justify-center w-16 h-16 rounded-full bg-white text-gray-900 mx-2"> <i class="fas fa-user"></i> </div> </div> ``` 其中，`flex` 类用于设置 Flex 布局，`justify-center` 类用于设置主轴上的对齐方式，`fixed bottom-0 w-full h-16 bg-gray-900` 类用于设置 Dock 的位置和背景色。每个 Dock 图标都使用了 `flex items-center justify-center w-16 h-16 rounded-full bg-white text-gray-900 mx-2` 类来设置样式，其中 `mx-2` 类用于设置图标之间的间距。这里使用了 Font Awesome 图标库中的图标，你可以根据自己的需求替换图标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值