如何评价css原子化框架—Tailwind？

在评价CSS原子化框架Tailwind之前，我们需要了解什么是原子化框架以及Tailwind的特点。

原子化框架是一种CSS框架，它将网页的样式分解为一组基本的、不可再分的样式类别，这些类别被称为原子类。原子化框架的目的是为了提高开发者的生产力，通过组合这些原子类来快速构建网页样式。Tailwind是一种非常流行的原子化框架，它提供了一组高度可定制的原子类，以帮助开发者快速构建现代化的网页设计。

评价Tailwind的好处和坏处：

优势：

高度可定制：Tailwind提供了一个配置文件，允许开发者根据项目需求定制框架中的原子类。这意味着开发者可以只包含他们需要的原子类，从而减少CSS文件的大小。
易于上手：Tailwind的原子类名称直观易懂，使得开发者可以快速学会并使用它们。此外，Tailwind还提供了一个可视化的文档网站，方便开发者查阅和学习。
社区支持：Tailwind有一个庞大的社区支持，这意味着开发者可以找到大量的资源、教程和插件来扩展框架的功能。

劣势：

学习曲线：虽然Tailwind的原子类名称直观易懂，但是对于新手来说，学习和熟悉它们仍然需要一定的时间和精力。
代码冗余：由于Tailwind的原子类是独立的，因此开发者可能会在编写样式时产生代码冗余。虽然这不会影响页面的最终效果，但可能会导致CSS文件的体积变大。
不适用于所有场景：虽然Tailwind非常适合构建现代化的网页设计，但是对于一些复杂的设计或者需要高度定制的项目，它可能不是最佳选择。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云COS：https://cloud.tencent.com/product/cos
腾讯云CDN：https://cloud.tencent.com/product/cdn
腾讯云SSL证书：https://cloud.tencent.com/product/ssl
腾讯云移动应用与游戏解决方案：https://cloud.tencent.com/product/tbaas
腾讯云云服务器：https://cloud.tencent.com/product/cvm

总之，Tailwind是一个非常流行的CSS原子化框架，它提供了一组高度可定制的原子类，以帮助开发者快速构建现代化的网页设计。尽管它存在一些劣势，但是它的优势也非常明显，特别是对于需要快速构建网页样式的项目来说。

相关·内容

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

Tailwind 是流行的原子化 css 框架。有多流行呢？它现在有 68k star 了，要知道 express 才 60k：那什么是原子化 css？...这个原子化 css 的概念还是很好理解的，但它到底有啥好处呢? 它解决了什么问题？口说无凭，我们试下 tailwind 就知道了，它就是一个提供了很多原子 class 的 css 框架。...感受到原子化 css 的好处了么？ tailwind 文档提到了 3 个好处：不用起 class 名字，这点简直太爽了，我就经常被起 class 名字折磨。...总结 tailwind 是一个流行的原子化 css 框架。...是否感受到了 tailwind 的简洁高效，易于扩展？就是这些原因让它成为了最流行的原子化 css 框架。

5413 0

【CSS当红框架】你必须得认识 Tailwind CSS 框架

前言一直在寻求一个能够帮助我快速编写 CSS 的工具，这样便于我快速对网页进行开发，方便我对于一些新技术的学习，而不用花太多精力去书写样式，昨天了解到原子化 CSS，我的心头一振。...然后与 BootStrap 相比，这个 Tailwind CSS 框架强在更加原子化，而且其种类比 BootStrap 要多很多，这是一个更加细粒度的 CSS 库，且自定义程度更高。...这些是我在掘金读到的一些大佬们的讨论：我读到这句：“原子类的最大的弊端就是无法覆盖样式。”...主要是如何平滑地将已经存在的项目过渡到原子化项目，而避免过多的改造成本，这一点很重要，tailwind 基本只解决了如何新建一个原子式的项目或者页面，而大多数复杂的web场景其实大多是离散的，从而并没有如此大的原子化的负担和指标...，小程序也许是一个tailwind的思路可以得以应用的点。

701 0

VueCLI 项目如何使用 Tailwind CSS

Tailwind CSS 是什么 Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。...为什么要使用 Tailwind CSS 可定制开发天生就支持响应式布局组件友好 ......首先安装 Vue npm install -g @vue/cli 初始化 Vue 项目，我们初始化一个名为 tailwind 的项目 vue create tailwind 中间省略若干步骤，可以直接默认就行...No 安装 Tailwind CSS 接下来我们将 Tailwind CSS 集成到我们的项目中 cd tailwind npm install tailwindcss 新建 tailwind.css,...在 src/assets 新建 css 文件夹，并新建 tailwind.css touch src/assets/css/tailwind.css 之后再 tailwind.css 文件中，添加如下内容

5K3 0

Tailwind CSS 是目前世上最好的CSS框架，你赞同吗？

使用Tailwind一段时间后，我觉得是时候写一篇文章来分享我目前所发现的东西了。那么，让我们开始吧。如何理解Tailwind CSS Tailwind CSS不是典型的CSS框架。...Tailwind CSS采用了提供广泛的实用类作为构建块的方法，使开发人员能够快速轻松地构建和样式化网站的任何部分。Tailwind CSS包含许多样式属性，从边距和填充到字体和颜色。...但在我看来，Tailwind CSS真正擅长的地方是定制化。该框架配备了一个配置文件，允许开发人员根据自己项目的需求更改默认参数。这意味着可以指定特殊的颜色、字体、断点和其他元素。...4、提升代码可维护性 Tailwind CSS 提供了一种模块化和可重用的样式方法。您可以通过实用类轻松更新和调整样式，而不必担心传统 CSS 中常见的级联效应。...对于习惯于使用传统CSS框架的开发人员来说，这可能需要一些学习曲线。熟悉实用类并理解如何有效地利用它们可能需要一些时间和努力。

6103 0

即时按需原子 CSS 引擎：比 Tailwind JIT 快 5 倍！ | 开源日报 No.149

picture unocss/unocsshttps://github.com/unocss/unocss Stars: 14.6k License: MIT picture 该项目是一个即时的按需原子...CSS 引擎，受到 Windi CSS、Tailwind CSS 和 Twind 的启发，解决了定制化、速度和体积的问题。...以下是该项目的特点和核心优势：完全可定制：通过预设提供所有功能，没有核心实用程序无解析、无 AST、无扫描，即时性能（比 Windi CSS 或 Tailwind JIT 快 5 倍） ~6kb min...+brotli：零依赖且浏览器友好快捷方式：别名实用程序动态别名化属性模式：在属性中组合实用程序纯 CSS 图标：使用任何图标作为单个类变体组：具有常见前缀的群组工具的速记法 CSS 指令：...主要功能包括提供了 200 多个系统设计案例、技术面试备忘单以及如何高效准备等内容。

2241 0

这几个CSS概念你了解吗？

CSS Module CSS Module 顾名思义就是 CSS 模块化，为什么需要模块化？...为了解决冲突就需要进行模块化区分，没有了命名冲突，更好的让组件间沙箱化，而CSS Module就是css模块化的实现方式之一 CSS Module 在打包的时候会将类名转换成带有hash值的新类名，...3.1 tailwind ? tailwind 官网链接?其实本质上也是一种原子类思维，一个 class 代表一种 CSS 属性。优点在于它把 class 拆分到足够细，粒度很小，很好很「原子」。...我们看下下面这段demo，官方事例如何实现一个卡片 ?...拓展阅读：如何评价CSS框架TailwindCSS？ 3.2 bulma ?

1.5K2 0

unocss，（原子化css），项目初体验

unocss 简单介绍原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。...UnoCSS 是一个引擎，而非一款框架，因为它并未提供核心工具类，所有功能可以通过预设和内联配置提供。 ---- unocss 其实就是提供所有你可能需要用到的 CSS 工具。...即使你只使用了其中一条 CSS 规则，但还是要为其余几条规则的文件体积买单。你的 CSS 文件会随着你的生成规则无上限的增大，以此类推，项目包的体积也会越来越大。...例如Tailwind就是这样，Tailwind生成的 CSS 文件会有数 MB 的大小。为了解决这个问题，Tailwind 通过使用 PurgeCSS 来扫描你的大包产物并删除你不需要的规则。...这得以使其在生产环境中 CSS 文件缩减为几 KB。然而，请注意，这个清除操作仅在生成构建下有效，而开发环境下仍要使用包含了所有规则巨大的 CSS 文件。

6.2K0 0

小而美的 css 的原子化

的原子化 CSS 是一个 CSS 框架，在没有对应的 CSS 框架的项目中，是如何写 CSS 的。...我们这边调研几个比较流行的 CSS 框架，以下是几个框架简要介绍。 CSS 框架介绍原子化 CSS 定义 “原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class。...CSS 原子化是如何解决这些问题的首先我们看看前文中提到组件使用 CSS 原子化是如何实现的，项目中已引入 winidicss。...框架作为项目的 CSS 规范的时候，需要考虑自身项目的现状，如果项目本身 CSS 复杂度较高，整体工作量较多，原子化的 CSS 是不太适合的。...你会发现 windicss (https://cn.windicss.org/posts/v30-utilities.html) 这类工具优先的css框架，也是添加蛮多额外的功能来弥补原子化 CSS 框架的缺陷

6804 0

如何使用 Tailwind CSS 设计高级自定义动画

Tailwind CSS，一款流行的实用型CSS框架，提供了一套强大的工具，可以轻松地创建令人惊艳的动画效果。...Transition 与 Transform Tailwind CSS 提供了一系列利用 CSS 过渡和变换的实用类。这些属性使您能够轻松创建平滑的动画和令人惊叹的变换效果，而无需花费太多的精力。...文件中添加关键帧以动画化对象。...将动画与其他 Tailwind 功能（暗模式）结合使用 Tailwind CSS的动画功能可以与框架提供的其他功能无缝集成。...结束上述设计的动画展示了使用CSS和Tailwind CSS框架可以实现的多样性和创造力。这些示例展示了各种动画效果，如旋转、弹跳、脉动、翻转和摆动。

8602 0

探秘目前最流行的css框架

Tailwind CSS是一个高度可定制的CSS框架，用于构建现代化的Web界面。它提供了一系列预定义的样式类，可以直接应用于HTML元素，从而快速而灵活地创建页面布局和设计。...与其他css框架相比，有什么优势？与其他CSS框架相比，Tailwind CSS更注重原子化的类命名方式，使得开发者可以通过组合不同的类来构建所需的样式。...Tailwind CSS通过原子化的类命名方式，只提供基础的原子类，使得开发者可以根据需要组合这些类，避免了样式冗余的问题。...缺乏灵活性：传统的CSS框架通常有一套固定的样式规则，难以满足个性化的需求。...，然后在 html 里直接引入这些原子化的 class。

3424 0

Vue3中使用Tailwind CSS

前言当谈到前端开发框架时，Tailwind CSS 是一个备受瞩目的选择。它是一款功能强大且灵活的CSS框架，提供了大量的实用工具类，帮助开发者快速构建现代化的用户界面。...Tailwind CSS 是一种流行的现代化 CSS 框架，它提供了一套原子类（Atomic Classes）来构建网页界面，相较于传统的 CSS 框架，如Bootstrap或Foundation，Tailwind...以下是 Tailwind CSS 的一些重要特点和概念：原子类：Tailwind CSS 的核心理念是原子类，它提供了大量的类名，每个类名对应一个特定的样式属性。...总的来说，Tailwind CSS 提供了一种非常灵活的方式来构建网页界面，它与传统的 CSS 框架在思维方式上有很大的区别，更加强调原子化的样式组合和定制化。...让我们通过一个简单的示例来演示如何使用这些工具类。

6676 0

如何使用Tailwind CSS轻松设计惊艳的进度条

在这篇博客文章中，我们将探讨进度条的威力以及如何使用流行的实用型CSS框架Tailwind CSS轻松创建它们。让我们开始吧！为什么进度条很重要？...，文件名你可以随意 touch tailwind.css 然后在空白的文件里，添加如下代码： @tailwind base; @tailwind components; @tailwind utilities...不要忘记添加必要的Tailwind CSS类和内联样式，以调整进度条的宽度、颜色和动画，以满足您的喜好。借助Tailwind CSS的灵活实用类，可能性是无限的！...结束在整片文章中，我们探讨了如何使用Tailwind CSS创建美观且可定制的进度条。...借助其丰富的实用类集合，Tailwind CSS为您提供了一种简单高效的方式来样式化和定制进度条，以满足您的设计需求。

5555 0

页面布局（下）：引入 Tailwind CSS 框架构建博客应用 UI 界面

在上篇教程中，学院君给大家演示了单页面博客应用前端路由和页面布局的基本构建，不过由于没有应用任何 CSS 样式代码，所以 UI 界面很丑陋，今天，学院君将引入 Tailwind CSS 框架来美化这个博客应用的...基于 Laravel Mix 引入 Tailwind 在 Laravel 项目中，我们可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架，开始之前，先安装 laravel-mix-tailwind...(); 由于 laravel-mix-tailwind 依赖 tailwind.js，所以还需要通过如下命令初始化 Tailwind： npx tailwindcss init 如果上述命令运行报错...CSS 框架已正常引入。...样式代码的效率：做好上述准备后，就可以基于 Tailwind CSS 框架重构博客应用前端页面样式代码了。

2.5K2 0

Facebook 重构：抛弃 Sass Less ，迎接原子化 CSS 时代

在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公司在 React 代码仓库中使用它们。...Tailwind 已经有了足够多的原子类了啊。那么，我们是否应该放弃原子 CSS 的想法，而仅仅使用 Tailwind CSS?...我们如何处理剩下的一次性样式? 与 Tailwind 相比，手写原子 CSS 可能不是最方便的。和 CSS-in-JS 比较 CSS-in-JS 和实用工具/原子 CSS 有密切关系。...探索原子 CSS-in-JS 原子 CSS-in-JS 可以被视为是“自动化的原子 CSS”：你不再需要创建一个 class 类名约定通用样式和一次性样式的处理方式是一样的能够提取页面所需要的的关键...没什么能阻止你在原子 CSS-in-JS 的框架上建立你自己的抽象 CSS 规则，Styled-system 就能在 CSS-in-JS 库里完成一些类似的事情。

3K1 0

Facebook 重构：抛弃 Sass u002F Less ，迎接原子化 CSS 时代

3.4K5 0

「前端工程四部曲」模块化的前世今生（下）

接下来这篇文章我们就来简单聊一聊 CSS 模块化。为什么CSS也需模块化？其实平常我们使用 Vue、React这类框架时，就已经使用到了CSS模块化。...ACSS ACSS，全称是 Atomic CSS ，即原子化的 CSS。...CSS 还是比较累的，不过好在有现成框架，像 Tailwind CSS[1] 就是一个基于 ACSS 的可定制的基础层 CSS 框架，它提供了构建定制化所需的构建块，无需重新覆盖内建于框架内中的风格。...「缺点：」使用原子化的 Tailwind CSS 框架后写 CSS 类有点像写行内样式。虽然 CSS 代码最小化了，但 HTML 膨胀了，虽然不用考虑命名，但是要记一堆新规则。...但是这并不妨碍 CSS in JS 确实有其独特的魅力，客观评价那就是优缺点都有。

6852 0

在Vite中接入现代化的CSS 工程化方案

CSS 原子化框架，如Tailwind CSS、Windi CSS，通过类名来指定样式，大大简化了样式写法，提高了样式开发的效率，主要解决了原生 CSS 开发体验的问题。...原子化框架在目前的社区当中，CSS 原子化框架主要包括Tailwind CSS 和 Windi CSS。...> vite version: {devDependencies.vite} );}启动项目可以看到如下的效果，说明样式已经正常生效除了本身的原子化...types/jsx';declare module 'react' { type HTMLAttributes = AttributifyAttributes;}shortcuts 用来封装一系列的原子化能力...Tailwind CSS接下来我们来接入 Tailwind CSS 方案，为了避免和之前的 Windi CSS 混淆，这里我建议你新起一个 Vite 项目。小册中对应的 GitHub 代码地址。

8685 0

原子化接替语义化声明，TailwindCSS使用指南

图片博客：https://www.mintimate.cn Mintimate’s Blog，只为与你分享页面框架页面前端框架，真的是发展的很快。...这就保证了Tailwind CSS可以实现高度定制化，同时输出效率也较高。版本历史 TailwindCSS自发布出，就支持原子化操作，当然TailwindCSS也在不断发展。...原子化对比语义化前文说过，TailwindCSS是典型的原子化CSS（Atomic），对比传统的语义化CSS（Semantic）还是有一些特点和区别。...转换到原子化CSS，需要读官方文档、需要学习设计系统的知识。...相比语义化CSS,原子化CSS类名方式更具扩展性,是未来CSS编写的发展趋势。本文系统概述了从语义化到原子化的演进,以及如何上手使用Tailwind CSS。

8650 0

解锁网页设计新境界：一文掌握Tailwind CSS

Tailwind CSS简介 Tailwind CSS是一个高度可定制的实用工具优先的CSS框架，它提供了构建网站界面的底层CSS类，使得开发者可以通过组合这些类来快速构建出独特的设计。...与传统的CSS框架（如Bootstrap或Foundation）不同，Tailwind不提供预设计的组件，而是提供原子化的、可复用的工具类，使得你可以按照自己的设计轻松地创建界面，而不必覆盖大量预设样式...Tailwind允许你通过配置文件轻松添加或修改积木（工具类），以适应你的设计语言。 Utilize Class 可以理解成一块块的积木，是原子的不可分割的。...# 创建新目录 mkdir tailwind-template cd tailwind-template # 初始化项目配置 npm init -y # 安装 TailwindCss npm install...-D tailwindcss # 初始化tailwincss配置文件 npx tailwindcss init # 使用编辑器打开目录 code .

1321 0

TailwindCSS—一个用于实现快速UI开发的实用工具集CSS框架。

很多的项目，都是对class语义化命名，简单的页面还可以接受，但是随着项目开发的深入，会出现很多类似的语义化场景，导致命名愈发困难。...二、什么是Tailwind CSSTailwind是一个原子类方式命名的css工具集。...ailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计...@tailwind components;@tailwind utilities;初始化package.jsonnpm init安装taildwindcss以及它的依赖postcss,autoprefixernpm...tailwind init -p5.我们在package.json文件下新增一个script"build": "postcss css/tailwind.css -o public/output.css

1.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云