介绍Tailwind CSS

Tailwind CSS 是一款功能强大且高度可定制的CSS框架。Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。

为什么Tailwind CSS

1. 快速开发：Tailwind CSS 提供了一套具有语义化的样式类，通过在HTML元素上应用这些类，开发人员可以快速构建用户界面而无需编写自定义CSS代码。这使得开发过程更加高效
2. 高度可定制：Tailwind CSS 具有高度可定制的特性，开发人员可以根据项目的需要配置和定制样式类。允许开发人员根据具体需求来组合和定制样式。
3. 响应式设计：Tailwind CSS 提供了一套响应式的样式类，使得开发人员能够轻松地创建适应不同设备和屏幕尺寸的用户界面，且支持自定义响应式规则。
4. 优化性能：Tailwind CSS 可根据项目需要自动进行样式优化和压缩，以减小页面加载时间和文件大小。开发人员可以选择只导入所需的样式类，以减少不必要的样式代码。

浏览器支持

Tailwind CSS v2.0 和 v3.0 兼容 Chrome、Firefox、Edge 和 Safari 的最新稳定版本设计和测试的。它不支持任何版本的 IE 版本。

安装Tailwind

1. Tailwind CLI
2. 使用 PostCSS 方式

安装 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

生成配置文件postcss.config.js、tailwind.config.js

npx tailwindcss init -p

配置tailwind.config.js模板路径

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到 main.css 中

@tailwind base;
@tailwind components;
@tailwind utilities;

将 main.css 引入到main.ts中

import './main.css';

在模板中使用

<div class="w-screen h-screen bg-black font-bold text-center">
    TailWind Css
</div>

1. 使用 CDN 方式

注意：Tailwind CSS 不兼容webpack5以下的webpack版本，如需使用请升级。

与预处理器一起使用

由于 Tailwind 是一个 PostCSS 插件，因此可以将它和 Sass、Less、Stylus 或其他预处理器一起使用，就像使用Autoprefixer等其他 PostCSS 插件一样。但是官方不推荐使用出PostCSS以外的预处理器

通过 npm 安装插件：

npm install -D postcss-import

然后将其添加为 PostCSS 配置中的第一个插件：

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

使用方式

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* components/card.css */
.card {
  padding: theme('spacing.4');
  /* ... */
}

项目中如何应用

基础使用

可以通过直接在 HTML 中应用预先存在的类来设置元素样式，预先存在的类参考官方文档：https://www.tailwindcss.cn

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="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-slate-500">You have a new message!</p>
  </div>
</div>

处理hover、active和其他状态

<button class="bg-sky-500 hover:bg-sky-700 ...">
  Save changes
</button>

Tailwind 包含几乎所有的修饰符，其中包括：

1. 伪类，如:hover、:focus、:first-child和:required
2. 伪元素, 如::before, ::after, ::placeholder, 和::selection
3. 媒体和功能查询，例如响应式断点、深色模式等prefers-reduced-motion
4. 属性选择器，如[dir="rtl"]和[open]

修饰符可以嵌套起来使用，例如在黑暗模式下、悬停时更改背景颜色：

<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</button>

响应式设计

常见设备分辨率的启发，默认有五个断点：

断点前缀	最小宽度	CSS
sm	640像素	@media (min-width: 640px) { ... }
md	768像素	@media (min-width: 768px) { ... }
lg	1024像素	@media (min-width: 1024px) { ... }
xl	1280像素	@media (min-width: 1280px) { ... }
2xl	1536像素	@media (min-width: 1536px) { ... }

默认宽度为16px 中等屏幕下是32px 大屏幕下是48px，使用方式如下：

<img class="w-16 md:w-32 lg:w-48" src="...">

Tailwind 为每个分辨率生成相应的max-*修饰符，开箱即用的有以下修饰符：

修饰符	媒体查询
max-sm	@media not all and (min-width: 640px) { ... }
max-md	@media not all and (min-width: 768px) { ... }
max-lg	@media not all and (min-width: 1024px) { ... }
max-xl	@media not all and (min-width: 1280px) { ... }
max-2xl	@media not all and (min-width: 1536px) { ... }

定制响应式规则，可以在tailwind.config.js自定义配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        screens: {
            'tablet': '640px',
            // => @media (min-width: 640px) { ... }

            'laptop': '1024px',
            // => @media (min-width: 1024px) { ... }

            'desktop': '1280px',
            // => @media (min-width: 1280px) { ... }
        },
    }
}

定义任意值响应式

使用min或max修饰符使用任意值即时生成自定义断点。

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>

复用样式

如何在不同的地方使用某一组样式：使用@apply修饰符

<!-- 复用样式前 -->
<button class="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">
  按钮
</button>

<!-- 复用样式后 -->
<button class="btn-primary">按钮</button>

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .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;
    }
}

定制主题

如果想更改颜色值、间距比例、版式比例或响应式配置等内容，可以将自定义配置添加到文件theme的部分

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

如果想配置更多参数请参考：https://www.tailwindcss.cn/docs/theme

功能和指令

指令

@tailwind 使用@tailwind指令将 Tailwind 的base、components和utilities样式插入variants到 CSS 中。

/**
 * 这是Tailwind的基本样式插件
 */
@tailwind base;

/**
 * 这是Tailwind的组件类插件
 */
@tailwind components;

/**
 * 这是Tailwind的公共类插件
 */
@tailwind utilities;

/**
 * 使用此指令来控制 Tailwind 注入悬停、焦点、响应式、深色模式
 * 如果省略，Tailwind 默认会将这些类附加到样式表的最后。
 */
@tailwind variants;

@layer 使用@layer指令告诉 Tailwind 一组自定义样式属于哪个层，为base、components和utilities分层。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

@apply

用于将任何现有类内联到您自己的自定义 CSS 中。

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}
.select2-search {
  @apply border border-gray-300 rounded;
}
.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}

默认情况下，任何内联的样式的 !important 都将被 @apply 删除，以避免特殊性问题：

/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}

如果您想要保留 @apply 的 !important，只需在末尾添加 !important：

/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

注意，如果使用 Sass/SCSS，则需要使用 Sass 的插值功能才能使其正常使用

.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}

@config

使用@config指令指定 Tailwind 在编译 CSS 文件时应使用哪个配置文件。这对于需要为不同 CSS 入口的项目。

@config "./tailwind.site.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

主题

theme()

使用该函数调用 Tailwind 配置值。

.content-area {
    height: calc(100vh - theme(spacing.12));
}

如果需要使用包含点的值（例如2.5间距刻度中的值），可以使用方括号表示法：

.content-area {
    height: calc(100vh - theme(spacing[2.5]));
}

访问嵌套颜色值时不要使用破折号语法

/* 错误案例 */
.btn-blue {
    background-color: theme(colors.blue-500);
}

/* 正确案例 */
.btn-blue {
    background-color: theme(colors.blue.500);
}

要调整颜色的不透明度，使用斜杠后跟要使用的不透明度值：

.btn-blue {
    background-color: theme(colors.blue.500 / 75%);
}

screen()

媒体查询的使用方式：

@media screen(sm) {
  /* ... */
}

在构建时解析为底层屏幕值，生成与指定断点匹配的常规媒体查询：

@media (min-width: 640px) {
  /* ... */
}