当前位置：首页 > article >正文

tailwindcss

article 2024/11/15 6:59:10

什么是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 代码解读复制代码<button
  class="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，但是他默认提供的一些属性值都是很专业的。比如颜色（专业制作的开箱即用的默认调色板）

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

和其他的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.js 和 postcss.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

其他

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或更高版本。