Tailwind CSS 심층 분석(요약 공유)-CSS 튜토리얼-php.cn

이 기사에서는 Tailwind css에 대한 관련 지식을 제공합니다. TailwindCSS는 부트스트랩, 요소 UI, Antd 및 bulma와 마찬가지로 일부 CSS 스타일을 캡슐화하고 개발 속도를 높이는 데 사용되는 도구입니다. .

Tailwind CSS 심층 분석(요약 공유)

(학습 영상 공유: css 영상 튜토리얼)

과 다른 CSS 프레임워크의 차이점은 무엇인가요?

CSS 개발은 기본적으로 세 단계를 거쳤습니다.

첫 번째 단계인 기본 작성 방법

은 프로그래밍의 프로세스 중심 작성 방법과 유사하며 CSS에서는 어떤 스타일이 필요한지, 어떤 스타일을 작성하는지 살펴보겠습니다. 코드에 집착하는 프로그래머는 간단한 CSS를 재사용합니다. 그러나 그것은 단지 단순한 재사용일 뿐입니다. 대부분의 경우 여전히 필요한 것과 쓰고 싶은 방식을 작성합니다.

두 번째 단계는 CSS 구성 요소화입니다.

프로그래밍의 객체 지향 작성과 유사하게 동일한 시각적 UI가 구성 요소에 캡슐화됩니다. 예를 들어, 버튼은 프로젝트 전체에서 여러 번 사용되며 동일한 스타일을 갖습니다. 그런 다음 버튼 클래스로 캡슐화할 수 있습니다. 사용할 때 이 클래스 이름을 직접 사용하십시오.

이것은 부트스트랩, 요소 ui, Antd, bulma의 접근 방식이기도 합니다. bootstrap，element ui，Antd，bulma的做法。

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

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

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

第三个阶段，CSS零件化。

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

上面第一个阶段的时候，我们讲了有些有对代码有追求的人，会开始复用css。
比如页面中大量的用到 float:left。那么就可以封装一个类，比如是这样

.left {float:left}

로그인 후 복사

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

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

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

它将所有的css属性全部封装成语义化的类，比如你想要一个float:left，它已经帮你封装好了，你直接使用一个float-left就可以。
需要一个宽度为12像素，只需要写w-3就可以。

举一个完整的例子，你可能需要实现下面这样一个效果：

Tailwind CSS 심층 분석(요약 공유)

按照我们正常的写法，需要这样写

<p>
  </p><p>
    <img  alt="Tailwind CSS 심층 분석(요약 공유)" >
  </p>
  <p>
    </p><h4>ChitChat</h4>
    <p>You have a new message!</p>
  <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 CSS，你只需要这样写就可以

<p>
  </p><p>
    <img  alt="Tailwind CSS 심층 분석(요약 공유)" >
  </p>
  <p>
    </p><p>ChitChat</p>
    <p>You have a new message!</p>

로그인 후 복사

极大的减少了代码量。

这种写法其实并不稀奇，就如同上面第一个阶段所说，我们自己写css的时候，也会做一些类似Tailwind CSS这样的事情，简单的封装一些css属性。
新浪网在十几年前就干过这事，还有ACSS，也是这个原理。只是被大家喷成了筛子。错误的时间做了正确的事情，免不了付出代价，造物弄人。

回到正题，但是，它和bootstrap之类的css框架有什么区别呢？
区别在于bootstrap帮你封装好了一些样式，比如卡片，表单，按钮，导航等等。
Tailwind CSS没有封装任何样式，一丝一毫都没有。

bootstrap降低了定制性，你很难依靠bootstrap去定制一个自己的类，虽然bootstrap也有部分原子化的类名，但那只是常用的一些css属性。

Tailwind CSS完全自由

이 프레임워크의 장점은 많은 수의 공통 UI를 캡슐화한다는 것입니다. 예를 들어 양식, 탐색, 팝업 창 또는 카드가 필요합니다. 준비된 수업이 있습니다. 그냥 복용하시고 사용하시면 빠르게 효과를 보실 수 있습니다. CSS를 직접 작성할 필요가 전혀 없습니다. 🎜🎜이것은 현재 가장 인기 있는 방법이기도 합니다. 최근에는 손글씨 스타일을 조금씩 적용하는 프로젝트가 거의 없었고 일부 CSS 프레임워크가 사용되었습니다. 🎜🎜신속하게 전달해야 하는 일부 프로젝트의 경우 이 구성 요소화된 CSS 프레임워크를 사용하는 것이 매우 적합합니다. 🎜🎜세 번째 단계는 CSS 구성 요소화입니다. 🎜🎜CSS 원자화라고도 합니다. 위의 1단계, 2단계와 비슷한 점이 있습니다. 이들은 여전히 구성 요소이지만 각 구성 요소는 단일 기능 CSS 속성입니다. 🎜🎜위의 첫 번째 단계에서 코드를 추구하는 일부 사람들은 CSS를 재사용하기 시작할 것이라고 언급했습니다.
예를 들어, float:left는 페이지에서 광범위하게 사용됩니다. 그런 다음 🎜

@media only screen and (max-width:1280px) { 
    .img {     
    width:196px; 
    } }@media only screen and (max-width: 760px) { 
    .img {     
    width:128px; 
    } }

로그인 후 복사

🎜와 같은 클래스를 캡슐화할 수 있습니다. 그런 다음 float:left를 사용해야 하는 경우 .left를 직접 사용하면 됩니다. 🎜🎜하지만 CSS를 직접 작성할 때는 일반적으로 사용되는 일부 간단한 클래스만 캡슐화합니다. 대부분의 CSS에는 수동으로 CSS를 작성해야 합니다. 예를 들어 12픽셀의 너비를 쓰려는 경우입니다. width:12px 를 솔직하게 적어야 합니다. 피할 수 있는 방법은 없지만, 아직 아무도 생각해 본 적이 없는 것 같습니다. 🎜🎜Tailwind CSS는 세 번째 단계의 제품입니다. 🎜🎜모든 CSS 속성을 의미 클래스로 캡슐화합니다. 예를 들어 float:left를 원한다면 이미 캡슐화되어 있으므로 float-left를 사용하면 됩니다.
12픽셀의 너비가 필요한 경우 w-3을 작성하면 됩니다. 🎜🎜완전한 예제를 제공하려면 다음 효과를 달성해야 할 수도 있습니다. 🎜🎜 여기에 이미지 설명 삽입

🎜🎜🎜저희 일반적인 작성 방법으로는 이렇게 작성하면 됩니다🎜🎜

<img  alt="Tailwind CSS 심층 분석(요약 공유)" >

로그인 후 복사

🎜🎜그러나 Tailwind CSS를 사용하면 이렇게 작성하면 됩니다. 🎜🎜

<a>Start Ticketing</a>

로그인 후 복사

🎜🎜코드 양이 대폭 줄어듭니다. 🎜🎜🎜이러한 작성 방식은 사실 특이한 것이 아닙니다. 위의 첫 번째 단계에서 언급했듯이 CSS를 직접 작성할 때 Tailwind CSS와 같은 작업도 수행하고 일부 CSS 속성을 간단히 캡슐화합니다.
Sina는 10여년 전에 이 작업을 수행했으며 ACSS도 동일한 원리를 사용했습니다. 그것은 모두가 체에 뿌렸을 뿐입니다. 잘못된 시기에 올바른 일을 한다면 필연적으로 대가를 치르게 될 것입니다. 🎜🎜본론으로 돌아가서 부트스트랩과 같은 CSS 프레임워크와 차이점이 무엇인가요?
차이점은 부트스트랩이 카드, 양식, 버튼, 탐색 등과 같은 일부 스타일을 캡슐화하는 데 도움이 된다는 것입니다.
Tailwind CSS는 어떤 스타일도 캡슐화하지 않습니다. 🎜🎜부트스트랩은 사용자 정의를 줄입니다. 부트스트랩에도 일부 원자 클래스 이름이 있지만 부트스트랩을 사용하여 사용자 정의하는 것은 어렵습니다. CSS 속성을 사용했습니다. 🎜🎜Tailwind CSS는 완전히 무료입니다. Tailwind CSS를 통해 부트스트랩과 같은 자신만의 UI 프레임워크를 만들 수도 있습니다. 🎜

Tailwind CSS有什么优点？

可定制化程度极高。

你可以随心所欲写出自己的样式。 想怎么折腾怎么折腾。
如果使用bootstrap，你如果想改变一个按钮的样式，就会比较困难。你得用覆盖式的写法，通过自己的样式覆盖掉bootstrap自带的样式。如果框架本身不支持修改，你通过自己的写法去修改框架本身的特性，这是一种很脏的写法。非常别扭。
但是这个问题在Tailwind CSS完全不存在。Tailwind CSS没有自以为是的封装任何样式给你。

不需要在写css。
使用Tailwind CSS，基本可以不用再写css。所有的效果都可以通过class名来完成。我用Tailwind CSS写了几个页面，到目前位置，还没有写过一行css。

不需要再为class取个什么名字而苦恼。
对于经常手写css的程序员来说，最大的噩梦可能就是怎么给class取名了。尤其是在同一个区块里面，区块名称，子元素名称，等等，一个页面动辄几十个几百个类名。非常痛苦。而这其中，真正能复用的class可能就个别几个。

使用Tailwind CSS完全不用为取名字烦恼，因为所有的css属性都被框架语义化封装好了。只需要在class里面引用就好。

响应式设计

Tailwind CSS遵循移动优先的设计模式。断点系统 很灵活。也是目前所有css框架里做的最好的。比如你要实现一个媒体查询，根据不同的屏幕宽度实现不同的图片宽度。
按照之前的写法，你可能得这么干

@media only screen and (max-width:1280px) { 
    .img {     
    width:196px; 
    } }@media only screen and (max-width: 760px) { 
    .img {     
    width:128px; 
    } }

로그인 후 복사

但是在Tailwind CSS，一句话就能搞定：

<img  alt="Tailwind CSS 심층 분석(요약 공유)" >

로그인 후 복사

超级方便。

一套专业的UI属性值

Tailwind CSS虽然没有封装任何UI，但是他默认提供的一些属性值都是很专业的。比如颜色
Tailwind CSS 심층 분석(요약 공유)

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

说了半天，Tailwind CSS和内联样式有什么区别？

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

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

有约束的设计。

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

响应式设计。

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

可以直接写鼠标滑过，点击等其他状态的样式。
比如你可以在class里面写一个hover:text-white ,代表的是鼠标滑过的时候，文本是白色。

其他的很多特点，比如可维护性等等。

Tailwind CSS有什么缺点？

类名很长

正如Tailwind CSS官网首页的口号一样，从此让你写样式不再离开html页面。Tailwind CSS将HTML与CSS高度解耦，把本来CSS的一些工作转嫁给了HTML。好处是使用Tailwind CSS你可以从此不再写css。但坏处是你的html标签的类名会很长很长。比如

<a>Start Ticketing</a>

로그인 후 복사

虽然Tailwind CSS也支持把很多属性提取成一个组件，但是对于不会再次复用的class。提取组件也没什么必要。
所以类名很多是我目前遇到的不太舒服的问题。

解决:
使用 @apply 提取类

<button></button>

로그인 후 복사

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;

로그인 후 복사

熟悉使用有成本

这一点逃避不了，所有的新技术，所有的css框架都有熟悉成本。Tailwind CSS也一样。比如你想做一个圆角，那你得知道Tailwind CSS里面的圆角属性怎么写，边框怎么写，边框样式怎么写等等。你需要不断的去看文档。

我对Tailwind的文档进行了翻译，中文文档见：http://tailwind.wyz.xyz/

所以一开始使用Tailwind CSS，特别是第一个项目，你会用起来比较痛苦。很多不喜欢Tailwind CSS的人可能从第一个项目就会放弃了。

但是只要你用Tailwind CSS做一两个项目，基本明确的告诉你，你以后很难再回到手写css的时候了。大多人都会觉得"很香"。

또한 Tailwind CSS 작성자는 이 문제를 해결하기 위해 특별히 vscode용 Tailwind CSS 코드 프롬프트 플러그인을 개발했습니다. 개발 효율성을 효과적으로 향상시킬 것입니다.
여기에 이미지 설명을 삽입하세요 Tailwind CSS代码提示插件。会有效的提高开发效率。
Tailwind CSS 심층 분석(요약 공유)

那我要不要学习Tailwind CSS？

当然，这是必须的。作为一个新兴css框架。在这一两年之内，Tailwind CSS框架的上升率已经稳居第一了。而且这种写法，在目前看来，优越与其他的任何css框架，目前看来这也是趋势。除非以后再出来什么奇葩的玩意儿。

建议对技术有追求的人最好学习一下。所有的新技术，都是学起来费劲，但用起来简单。

要不要对以前的项目用Tailwind CSS进行重构？

大多数情况下不建议，Tailwind CSS的主要优势在于开发效率的提升。如果一个项目你已经开发完成了。就没必要重新使用Tailwind CSS了。
但如果你之前的这个项目，你本来也准备重构了。在犹豫用什么css框架，那你可以试试Tailwind CSS。
另外是，如果一个项目，三天两头的更新迭代前端界面，并且之前的代码写的也不怎么好，那建议使用Tailwind CSS重构。

是不是以后可以放弃bootstrap之类的框架了？

不是，主要看你的场景。我个人感想，如果一个项目，需要快速或者简单交付，那没必要用Tailwind CSS。用bootstrap，bulma之类的框架可以让你很快的完成一个项目。不用纠结太深的技术。
Tailwind CSS更适合于页面定制化高的场景。

听说Tailwind CSS的文件很大是不是？

是的。因为它需要把所有的css属性全部都封装一遍，所以css文件巨大，3M多。所以不建议在页面内直接引入Tailwind 原生css文件的做法。
Tailwind CSS官方团队为了解决这个问题，提出了一个方案，在编译的时候引入PurgeCSS 这个工具，构建的时候，会自动删除掉所有你没用到的css。只保留你用到的css。这样最终打包出来的css文件极小极小，一般的项目构建出来的css文件,压缩一下甚至不会超过10K。

Windi CSS

如果已经熟悉Tailwind CSS，那么可以将 Windi CSS 视为Tailwind的替代品，它提供更快的加载时间

通过扫描您的 HTML 和 CSS 并按需生成实用程序，Windi CSS 能够在开发中提供更快的加载时间和快速的 HMR，并且不需要在生产中进行清除。

Windi CSS 支持Tailwind CSS 的所有实用程序，无需任何额外配置。
Windi CSS中可以为任何实用程序类添加前缀!以将它们设置为!important. 当您想要覆盖特定属性的先前样式规则时，这可能非常有用。
Windi CSS 更简单的响应式设计。
Windi CSS 支持属性模式，您可以在 html 属性中编写 windi 类
Windi CSS 具有开箱即用的暗模式支持。
Windi CSS 通过用括号对它们进行分组来为相同的变体应用实用程序。
Windi CSS 的可视化分析工具。浏览您的实用程序使用情况，了解您的设计系统，识别“不良做法”等等！
Windi CSS 也提供一流的集成。

构建工具
Tailwind CSS 심층 분석(요약 공유)

框架
Tailwind CSS 심층 분석(요약 공유)

编辑器
Tailwind CSS 심층 분석(요약 공유)

API
Tailwind CSS 심층 분석(요약 공유)

指令

@apply：将任何现有的实用程序类内联到您的样式块中。
@variants ：可以通过将它们的定义包装在指令中来生成您自己的实用程序的屏幕变体、状态变体、主题变体。
@screen : 允许您创建按名称引用断点的媒体查询。
@layer : 设置每个类的应用顺序。
theme()
그러니까 Tailwind CSS를 배워야 할까요?

필수

Tailwind CSS 프레임워크의 성장률은 확고히 1위를 차지했습니다

기술을 추구하는 사람들이 꼭 배워야 할 것을 권장합니다. 모든 새로운 기술은 배우기 어렵지만 사용하기는 쉽습니다.

Tailwind CSS를 사용하여 이전 프로젝트를 리팩터링하고 싶으신가요?

대부분의 경우 권장하지 않습니다. Tailwind CSS의 가장 큰 장점은 개발 효율성 향상입니다. 프로젝트를 완료한 경우. Tailwind CSS를 재사용할 필요는 없습니다.
하지만 이전에 이 프로젝트가 있었다면 리팩토링할 준비가 되어 있었을 것입니다. 어떤 CSS 프레임워크를 사용할지 망설이고 있다면 Tailwind CSS를 사용해 보세요.
또한 프로젝트가 3일마다 프런트엔드 인터페이스를 업데이트하고 반복하며 이전 코드가 그다지 좋지 않은 경우 Tailwind CSS 재구성을 사용하는 것이 좋습니다.

미래에는 부트스트랩과 같은 프레임워크를 버릴 수 있나요?

🎜아니요, 주로 장면에 따라 다릅니다. 내 개인적인 생각으로는 프로젝트를 빠르고 간단하게 전달해야 하는 경우 Tailwind CSS를 사용할 필요가 없습니다. bootstrap, bulma 등의 프레임워크를 사용하면 프로젝트를 빠르게 완료하는 데 도움이 됩니다. 기술에 너무 집착하지 마세요.
Tailwind CSS는 페이지 사용자 정의 수준이 높은 시나리오에 더 적합합니다. 🎜

Tailwind CSS 파일 용량이 엄청 크다고 들었죠?

🎜그렇습니다. 모든 CSS 속성을 캡슐화해야 하기 때문에 CSS 파일은 3M보다 큽니다. 따라서 Tailwind 기본 CSS 파일을 페이지에 직접 도입하는 것은 권장되지 않습니다.
Tailwind CSS이 문제를 해결하기 위해 공식 팀은 컴파일 중에 PurgeCSS 도구를 도입하는 스킴을 제안했으며, build 때가 되면 사용하지 않는 모든 CSS를 자동으로 삭제합니다. 사용하는 CSS만 보관하세요. 이렇게 최종적으로 패키징된 CSS 파일은 매우 작습니다. 일반 프로젝트에서 구축한 CSS 파일은 압축해도 10K를 넘지 않습니다. 🎜

Windi CSS

이미 Tailwind CSS에 익숙하다면 Windi CSS를 Tailwind의 대안으로 고려해 볼 수 있습니다. 더 빠른 로딩 시간을 제공하는 🎜🎜🎜 Windi CSS는 HTML 및 CSS를 스캔하고 필요에 따라 유틸리티를 생성함으로써 개발 시 더 빠른 로딩 시간과 빠른 HMR을 제공할 수 있으며 생산 시 정리가 필요하지 않습니다. 🎜
- Windi CSS는 추가 구성 없이 Tailwind CSS의 모든 유틸리티를 지원합니다. 🎜
- Windi CSS의 모든 유틸리티 클래스에는 ! 접두어를 붙여 !important로 설정할 수 있습니다. 특정 속성에 대해 이전 스타일 규칙을 지정할 때 유용합니다. 🎜
- Windi CSS 더 단순해진 반응형 디자인. 🎜
- Windi CSS는 속성 모드를 지원하므로 html 속성에 windi 클래스를 작성할 수 있습니다. 🎜
- Windi CSS는 기본적으로 다크 모드를 지원합니다. 🎜
- Windi CSS는 대괄호로 그룹화하여 동일한 변형에 유틸리티를 적용합니다. 🎜
- Windi CSS용 시각적 분석 도구입니다. 유틸리티 사용량을 찾아보고, 설계 시스템을 이해하고, "잘못된 관행"을 식별하는 등 다양한 작업을 수행하세요! 🎜
- Windi CSS는 또한 동급 최고의 통합 기능을 제공합니다. 🎜🎜🎜빌드 도구
  🎜🎜프레임
  🎜🎜편집기
  🎜🎜API
  🎜🎜명령🎜
  - @apply: 인라인 기존 유틸리티 클래스를 스타일 블록에 추가하세요. 🎜
  - @variants: 정의를 지시어로 래핑하여 자체 유틸리티의 화면 변형, 상태 변형, 테마 변형을 생성할 수 있습니다. 🎜
  - @screen : 중단점을 이름으로 참조하는 미디어 쿼리를 생성할 수 있습니다. 🎜
  - @layer: 각 클래스의 신청 순서를 설정합니다. 🎜
  - theme() : 이 함수를 사용하면 점 표기법을 사용하여 구성 값에 액세스할 수 있습니다. 🎜🎜🎜(동영상 공유 학습: 🎜css 동영상 튜토리얼🎜)🎜