您的位置:首页 > 文旅 > 旅游 > tailwindcss

tailwindcss

2024/12/23 9:24:58 来源:https://blog.csdn.net/readmancynn/article/details/141758847  浏览:    关键词:tailwindcss

什么是Tailwind CSS

Tailwind CSS 是一个可定制化的 CSS 框架,最大的特点是功能类优先,和我们知道的bootstrap,element ui,antd,veui等框架一样。将一些CSS样式封装好,用来加速我们开发的一个工具。

简单理解 TailwindCSS 就是 CSS 的 lodash, 他是一个增强工具类,你可以用原子类的方式写样式,也可以基于 PostCSS 作为工具函数做 Mixin。

核心概念

功能类优先

传统情况下,开发以下功能会先写html结构,然后编写对应的CSS样式

<div class="chat-notification"><div class="chat-notification-logo-wrapper"><img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo"></div><div class="chat-notification-content"><h4 class="chat-notification-title">ChitChat</h4><p class="chat-notification-message">You have a new message!</p></div>
</div><style>.chat-notification {display: flex;max-width: 24rem;margin: 0 auto;padding: 1.5rem;border-radius: 0.5rem;background-color: #fff;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}.chat-notification-logo-wrapper {flex-shrink: 0;}.chat-notification-logo {height: 3rem;width: 3rem;}.chat-notification-content {margin-left: 1.5rem;padding-top: 0.25rem;}.chat-notification-title {color: #1a202c;font-size: 1.25rem;line-height: 1.25;}.chat-notification-message {color: #718096;font-size: 1rem;line-height: 1.5;}
</style>

使用 Tailwind,您可以通过直接在 HTML 中应用预先存在的类来设置元素的样式。

css 代码解读复制代码<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"><div class="flex-shrink-0"><img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"></div><div><div class="text-xl font-medium text-black">ChitChat</div><p class="text-gray-500">You have a new message!</p></div>
</div>

这种方法使我们无需编写自定义的 CSS 即可实现一个完全定制的组件设计,代码变的精简了很多

功能类的好处:

  • 不需要为了起类命名而浪费精力 不需要为了设置一些样式额外调价一些wrapper这样的类名,不必为了某个功能的抽象命名发愁。
  • CSS停止增长 使用传统的方法,每次添加新功能CSS文件都会变大。使用功能类,所有内容都是可重用的,因此几乎不需要编写新的CSS
  • 更改会更安全 CSS是全局性的,永远不知道在修改的时候会破坏掉什么。HTML中的类是本地的可以随意更改不用担心其他问题

响应式设计

利用断点语法实现 @media 功能,现在加个前缀就可以搞定了。 断点系统很灵活。也是目前所有CSS框架里做的最好的。比如你要实现一个媒体查询,根据不同的屏幕宽度实现图片宽度的变化

之前的写法:

css 代码解读复制代码@media only screen and (max-width:1280px) { img {     width:196px; } 
}
@media only screen and (max-width: 760px) { img {     width:128px; } 
}

但是用Tailwind CSS,一句话就能搞定:

ini代码解读
复制代码<img class="w-16 md:w-32 lg:w-48" src="..." />

伪类: 悬停、焦点和其它状态

支持伪类前缀标签,以及可以和响应式一起使用

ini 代码解读复制代码<buttonclass="bg-orange-500 hover:bg-orange-600 sm:bg-green-500 sm:hover:bg-green-600"
>Hover
</button>

自定义样式

因为tailwind是最基础的框架,tailwindcss默认的utility,base,component 不足以满足所有的场景;

使用 @layer 指令,Tailwind 自动将这些样式移动到 @tailwind base, @tailwind utility,@tailwind component 的位置

less 代码解读复制代码@layer components {.btn-blue {@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;}.btn-blue:hover {@apply bg-blue-700;}
}

Tailwind 语法糖

less 代码解读复制代码@tailwind base;
@tailwind components;
@tailwind utilities;@layer base {h1 {@apply text-2xl;}
}@layer components {.btn {@apply bg-gray-500 text-white font-bold;@apply py-2 px-4 rounded;font-family: Georgia, Cambria, "Times New Roman", Times, serif;background-color: theme("colors.blue-500");}
}@layer utilities {@variants hover, focus {.filter-none {filter: none;}}@responsive {.bg-opacity-none {@apply opacity-0;}}
}@screen sm {/* ... */
}.btn-blue {background-color: theme('colors.blue.500');
}
  • @tailwind:使用 @Tailwind 指令将 Tailwind 的 base, components, utilities 插入到 CSS 中。
  • @apply:使用 @apply 将任何样式内联到您自己的自定义 CSS 中。
  • @layer:使用 @layer 指令告诉 Tailwind 属于一组自定义样式的 “块”。在 base, components, utilities 有效。
  • @variants:您可以通过在 @variants 指令中包装它们的定义来生成响应式、hover, focus, active 和其他伪类。
  • @responsive:通过将 class 的定义包装在 @responsive 指令中,您可以生成自己 class 的响应式。
  • @screen: 使用@screen指令并按名称引用断点,而不是在您自己的CSS中复制它们的值。
  • theme():使用 theme() 函数和 . 访问你的 Tailwind 配置值。

自定义配置

想要自定义配置,需要先了解tailwindcss 的默认配置

tailwind.config.js 中可以扩展自己的自定义配置项

css 代码解读复制代码// tailwind.config.js
module.exports = {theme: {screens: {sm: "640px",md: "768px",lg: "1024px",xl: "1280px",},fontFamily: {display: ["Gilroy", "sans-serif"],body: ["Graphik", "sans-serif"],},borderWidth: {default: "1px","0": "0","2": "2px","4": "4px",},extend: {colors: {cyan: "#9cdbff",},spacing: {"96": "24rem","128": "32rem",},},},
};

有一套专业的UI属性值

Tailwind CSS虽然没有封装任何UI,但是他默认提供的一些属性值都是很专业的。比如颜色(专业制作的开箱即用的默认调色板)

image-20240831162835134

还有各种内边距外边距,宽高,文字大小行高颜色等等。即使你不懂设计,按照他内置的属性做出来的东西,也不会太差。

和其他的CSS框架有什么区别?

CSS发展到现在,基本经历了三个阶段。

第一个阶段,原生写法

是类似于编程中面向过程的写法,需要什么样式,自己在CSS中写什么样式。对代码有洁癖的程序员会进行简单的CSS复用。但是也只是简单的复用,大多数时候还是需要什么写什么,想怎么写怎么写。

第二个阶段,CSS组件化

类似于编程中面向对象的写法,将相同视觉的UI封装成一个组件。比如一个按钮,整个项目中,这个按钮被多次使用,并且样式一致。那么就可以封装成一个按钮类。使用的时候直接使用这个类名称就OK。

这也是bootstrap,element ui,antd,veui的做法。

这种框架的优势在于,封装了大量常见的UI。比如你需要一个表单,需要一个导航,需要一个弹窗,Card卡片。有现成的class。直接拿过来用,就可以快速的完成效果。完全不需要动手写CSS。

这也是目前比较流行的方法。这几年几乎很少有项目是自己一点一点手写样式的了,多多少少都会使用到一些css框架。

对于一些需要快速交付的项目,非常适合使用这种组件化css框架

第三个阶段,CSS零件化

也叫做CSS原子化。和上面第一个阶段第二个阶段都有类似的地方。依旧是组件,只是每个组件都是一个单一功能的CSS属性。

上面第一个阶段的时候,我们讲了有些有对代码有追求的人,会开始复用CSS。

比如页面中大量的用到 float:left。那么就可以封装一个类,比如是这样

sql代码解读
复制代码.f-left {float:left}

然后需要使用 float:left的时候,直接使用 .f-left就可以。

但是我们自己写css的时候,仅仅是封装一些常用的简单的类,绝大多数的CSS,都需要动手去写css。比如你要写个宽度12像素。你就得老老实实的去写 width:12px,逃避不了,不过估计也没人想过逃避。

Tailwind CSS就是第三个阶段的产物,它做了什么呢?

它将所有的css属性全部封装成语义化的类,比如你想要一个float:left,它已经帮你封装好了,你直接使用一个float-left就可以。

Tailwind CSS和内联样式有什么区别?

Tailwind CSS是把所有样式写在class里面。内联样式是把所有样式写在style里面,所以会让很多人造成一个印象:Tailwind CSS和内联样式差不多,大同小异。

其实是有很大的区别,Tailwind CSS相比于内联样式,有以下几点特点:

有约束的设计

使用内联样式,每个值都是一个随便填写的数字。使用Tailwind CSS类,你要从预先定义好的设计系统中选择样式,这样你开发出来的页面,视觉上会保持一致,不会乱七八糟。

响应式设计

您不能在内联样式中使用媒体查询,但可以使用Tailwind的响应式类来轻松开发完全响应式界面。比如你可以在class里写一个sm:text-left,代表的是,在小屏幕上,文字居中的方式是居左显示。但是你在内联样式是不可能做到这些的。

修饰符

把修饰符,如各种伪类、暗黑模式、响应式设计至于前缀的设计用起来很顺手

ini代码解读
复制代码<div class="focus:ring-2 hover:bg-red-700 dark:bg-gray-800"></div>

Tailwind CSS的文件很大?

是的。因为它需要把所有的CSS属性全部都封装一遍,所以CSS文件巨大。所以不建议在页面内直接引入Tailwind 原生CSS文件的做法。

Tailwind 在构建生产文件时引入PurgeCSS,这个工具在构建的时候,对代码进行正则匹配,剔除没有使用过的原子类。这意味着最后打包出来的 CSS 文件是极小的,一般的项目构建出来的CSS文件, 再经过压缩甚至不会超过10K。

When removing unused styles with Tailwind, it’s very hard to end up with more than 10kb of compressed CSS.

Taillwind使用指南

通过npm安装

kotlin 代码解读复制代码// 项目支持postcss8可以下载最新版本
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
// postcss7 则可以下载兼容版本
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

创建配置文件

接下来生成tailwind.config.jspostcss.config.js 文件:

csharp 代码解读复制代码// 生成基础配置文件
npx tailwind init -p
// 生成默认配置文件
npx tailwind init --full

CSS 中引入 Tailwind

less 代码解读复制代码/* ./src/index.css *//*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

由于 Chromium 中的 bug ,请确保包含 /*!@import */ 注释,以避免开发时在 Chrome DevTools 中出现的性能问题。此问题已在 Canary 中修复,但尚未发布

VSCode 补全插件

Tailwind CSS IntelliSense

image.png

其他

  • Tailwind CSS v2.0开始放弃对IE 11的支持,如果您需要支持 IE 11,我们建议继续使用 Tailwind CSS v1.9
  • Tailwind CSS v2.0 不再支持 Node.js 8或10。要建立您的 CSS,您需要确保您在本地和 CI 环境中运行 Node.js 12.13.0或更高版本。

参考资料

tailwindcss官网

如何评价CSS框架TailwindCSS

nd CSS v2.0开始放弃对IE 11的支持,如果您需要支持 IE 11,我们建议继续使用 Tailwind CSS v1.9

  • Tailwind CSS v2.0 不再支持 Node.js 8或10。要建立您的 CSS,您需要确保您在本地和 CI 环境中运行 Node.js 12.13.0或更高版本。

参考资料

tailwindcss官网

如何评价CSS框架TailwindCSS

深入浅出 tailwindcss

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com