fle…Tailwind

CSS即可快速构建美观的网站。

本质上是一个工具集包含了大量类似

flex、

框架一样提供了一些预定义的类来实现常用样式而是提供了一组可以组合的原子类可以通过组合这些原子类来定义样式。

这些原子类都是非常小的样式类它们只定义了一个具体的样式细节例如背景色、文本颜色、字体大小、宽度、高度等。

通过将它们组合在一起可以快速而灵活地创建出各种不同的样式。

优点

灵活高度定制化最终

提供了大量的样式原子类可以快速构建出漂亮且具有效果的原型。

用于大型

Web

代码。

同时它强调样式的规律性可以防止样式的重复定义提高代码的可读性和易维护性。

与其他框架或库集成

Tailwind

Bootstrap。

在不同的应用中它可以作为一种简洁的样式定制解决方案。

移动应用开发

Tailwind

的响应式设计可以轻松的应用到移动应用中开发人员可以根据不同屏幕尺寸来确定相应的样式提高移动应用的适应性。

Why

License。

这意味着可以免费使用、复制、修改、合并、出版发行、再授权、销售软件及其衍生品。

所以从许可证方面来说使用

Tailwind

提供了详细的文档和示例使得学习过程更加简化。

使用方式类似Bootstrap且提供了vscode自动补全插件方便进行快速开发。

社区支持和更新频率

社区非常庞大且活跃拥有许多开发者、设计师和贡献者。

可以在官方论坛、GitHub

仓库、Stack

和社交媒体等平台上找到大量的问题解答、教程、示例代码和实用资源。

更新频率高可以及时获取到

bug

在性能表现方面采用了一种基于原子类的方法只包含实际使用到的样式。

这意味着不会加载不必要的代码从而减小了文件大小提高了加载速度。

同时Tailwind

CSS

提供了一套优化的构建工具和配置选项无运行时依赖和快速响应式设计使其具有良好的性能表现。

Tailwind

CSS

使用原子类构建块的方法通过组合不同的类来定义样式而不是使用预定义的组件。

这种方法使得定制和扩展变得非常简单可以根据项目需求自由组合和重用样式类。

具有高度可定制化的配置选项提供了插件系统允许轻松地扩展框架功能也可以与现有的组件库集成。

二、Tailwind

一般标准做法是将CSS和HTML分开来实现关注点分离(separation

div

classchat-notification-logo-wrapperimg

src/img/logo.svg

classchat-notification-contenth4

classchat-notification-titleChitChat/h4p

classchat-notification-messageYou

have

0.04);}.chat-notification-logo-wrapper

{flex-shrink:

3rem;}.chat-notification-content

{margin-left:

0.25rem;}.chat-notification-title

{color:

1.25;}.chat-notification-message

{color:

/style这种做法会起很多无所谓的名字几周之后回来修改代码时根本搞不清楚样式应用到了哪些元素上而且很可能在其它地方也会使用同样的类名当尝试修改时就导致UI无法正常工作。

使用Tailwind

/div如果你觉得HTML中类名过多可以在vscode中安装Inline

2.语法冗长

使用class定义类名然后编写代码如此反复可能会造成很大的代码量使用Tailwind

3.样式定制

的设计哲学是提供一系列基础工具类通过组合这些工具类来快速构建页面和

Bootstrap

类来构建页面每个类只负责一个特定的样式因此它的样式组织方式更加细粒度和灵活。

而

Bootstrap

则更倾向于将多个样式组合成一个类以便快速实现某个组件或效果。

自定义程度

Tailwind

更容易进行自定义和扩展因为它的样式都是单独的类并且可以通过配置文件进行自定义。

而

Bootstrap

使用class编写类名再编写样式会造成样式冗余也会出现虽然定义了样式但是没有被使用到变成“僵尸样式”Tailwind

CSS

使用暗黑模式前你需要在tailwind.config.js中配置

/**

dark:bg-green-500/div三、Tailwind

CSS语法规则

中有一些响应式样式类用于在不同的屏幕尺寸下显示不同的样式。

这些样式类命名规则为

{屏幕尺寸}:{属性}-{属性值}例如

表示在小屏幕尺寸下文本左对齐在大屏幕尺寸下文本居中。

链接样式类在

Tailwind

表示鼠标悬停时出现下划线.hover:text-red-500

表示鼠标悬停时文本变为红色

属性自定义颜色这个属性包含一个颜色对象您可以并据此为您的项目定义新的颜色。

响应式设计Tailwind

提供了一系列响应式类让您可以根据不同的屏幕尺寸为不同的设备定制

定制样式Tailwind

提供了许多原始的类您可以轻松地将它们组合在一起创造出自定义样式的组合。

组合实用类通常情况下您可以通过多个实用类的组合来实现所需样式。

例如要在元素上添加40个像素的上边距和底边距您可以将

pt-10上边距为10

。

扩展现有实用类您还可以通过添加前缀或后缀来扩展现有的实用类。

例如要创建一个自定义的

bg-opacity-90

来扩展样式该功能允许您将多个实用类组合成自定义样式然后将其应用于一个元素。

例如您可以创建一个自定义的

font-bold-uppercase

类到一个元素中classfont-bold-uppercase。

文本样式Tailwind

text-center居中对齐文本、text-2xl增加文本大小。

Tailwind

来构建网格系统这使得在项目中创建布局变得更加容易。

利用网格系统类将组件和元素对池进行行和列的多样化排列能让您快速定位到您需要的布局。

ini复制代码div

z-index、position、top、right、bottom、left

缩放图像利用

tailwind.config.jsmodule.exports

{//路径注意调整content:

initial-scale1.0titleDocument/title!--

--link

使用tailwindcss对当前项目进行编译然后输出css文件

npx

对于其它项目中的使用可以详见TailwindCSS的使用看这一篇就够了