## Tailwindcss配置

> tailwindcss是一款非常方便的可定制的css样式库，方便我们在class中使用，并且可以进行主题配置，比如深色模式，当然也可以自己定义模式。
>
> 里面有超多简写class，vscode下载 `Tailwind CSS IntelliSense` 给予智能化的提示～
>
> 官方文档： [https://www.tailwindcss.cn/docs/installation](https://www.tailwindcss.cn/docs/installation) （利用该文档可进行类似字典查找，直接搜索css样式即可找到对应的class）
>
> ![](https://cdn.portal.levenx.com/levenx-world/ini84a9nxUN0alCC.png)

## 安装

安装依赖 

```shell
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

创建配置文件

```shell
npx tailwindcss init
```

> 将会生成一个 `tailwind.comfig.js `文件, 用于主题配置

```js
// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

#### 使用

引入tailwind.css

```js
import "tailwindcss/tailwind.css"
```

在react 中使用

```tsx
<div className="flex flex-row gap-[5.5px] items-center">
</div>
```

介绍一些常见的配置

> 注意在theme中的配置中写相当于overwrite默认配置，只有在extend中是属于在默认配置上扩展。如果配置内容较多，建议写在不同文件引入。

```js
// tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  // ...
  content: ['./src/**/*.{js,jsx,ts,tsx}'],// 包含的文件范围
  darkMode: false, // 默认是false 'media' -> 用户的操作系统控制深色模式， 'class' -> 手动控制切换深色模式
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
      white: '#FFFFFF',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    fontSize: {
      xs: ['3px', {lineHeight: '4px'}],
      sm: ['3.5px', {lineHeight: '5px'}],
      base: ['4px', {lineHeight: '6px'}],
      lg: ['4.5px', {lineHeight: '7px'}],
      xl: ['5px', {lineHeight: '7px'}],
      '2xl': ['6px', {lineHeight: '8px'}],
      '3xl': ['7.5px', {lineHeight: '9px'}],
      '4xl': ['9px', {lineHeight: '9px'}],
      '5xl': ['12px', {lineHeight: '18px'}],
      '6xl': ['14px', {lineHeight: '20px'}],
      '7xl': ['15px', {lineHeight: '24px'}],
      '8xl': ['16px', {lineHeight: '24px'}],
      '9xl': ['17px', {lineHeight: '28px'}],
      '10xl': ['10px', {lineHeight: '15px'}],
      '12xl': ['12px', {lineHeight: '18px'}],
      '14xl': ['14px', {lineHeight: '21px'}],
      '15xl': ['15px', {lineHeight: '23px'}],
      '18xl': ['18px', {lineHeight: '27px'}],
      '20xl': ['20px', {lineHeight: '30px'}],
      '24xl': ['24px', {lineHeight: '36px'}],
      '28xl': ['28px', {lineHeight: '42px'}],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
  plugins: [
    require('@tailwindcss/line-clamp'), // 用于将文本截断为固定行数的
  ]
}
```


tailwindcss配置tailwindcss是一款非常方便的可定制的css样式库，方便我们在class中使用，并且可以进行主题配置，比如深色模式，当然也可以自己定义模式。里面有超多简写class，vscode下载TailwindCSSIntelliSense给予智能化的提示～官方文档：https://www.tailwindcss.cn/docs/installation（利用该文档可进行类似

TailwindCSS 基础配置

## 背景

TailwindCSS 近年来在前端圈非常流行，它摆脱了原有的CSS限制，以灵活实用为卖点，用户通过各种class组合即可构建出漂亮的用户界面。对于初学者而言，可能需要一些上手成本，一旦掌握实用技巧后，TailwindCSS会是我们开发工作中的出鞘利刃。

笔者参与开发的项目几乎全部支持TailwindCSS来完成需求开发，期间碰到过 TailwindCSS 相关的各种问题。于是想着把 TailwindCSS 的使用技巧和踩坑经验记录下来，分享给有需要的同学。

本文详细介绍常见前端构建工具脚手架&技术栈开启使用 TailwindCSS的 步骤。

## 目标

- 初学者快速入门 TailwindCSS；
- TailwindCSS 使用技巧和提效工具；
- 高效的问题定位和排查；
- TailwindCSS 工作原理；

## 使用步骤

> 💡 对于现代化前端开发，webpack、vite、rollup 这些前端构建工具是必须的；使用PostCSS插件是构建工具和 TailwindCSS 结合的最佳选择。

### 1. 安装 TailwindCSS & PostCSS

```javascript
npm install -D tailwindcss tailwindcss postcss autoprefixer
```

### 2. 初始化 TailwindCSS 配置文件

```javascript
npx tailwindcss init
```

### 3. 配置 TailwindCSS 扫描范围

> 📌 由于 TailwindCSS 的工作原理是扫描指定范围内所有的文件，获取到文件中CSS class类，基于TailwindCSS 内置预设的规则以及用户自定义的规则，最终生成一份 CSS 文件。
>
> **那么重点来了!!!**
> 对于不同前端技术栈的项目，比如 React、Vue、Svelte、Angular等等，我们只需要**配置对应的文件扫描范围**即可。其他的配置步骤都是相同的。

- React：`"./src/**/*.{js,jsx,ts,tsx}"`
- Vue: `"./src/**/*.{vue,js,ts,jsx,tsx}”`
- Svelte: `"./src/**/*.{svelte,js,ts,jsx,tsx}"`

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
	// 加载对应**构建工具**和**技术栈**的文件即可
  **content: ["./src/**/*.{html,js}"],**
  theme: {
    extend: {},
  },
  plugins: [],
}
```

如果你在html模板中也使用了 TailwindCSS 的样式类，那么 `content` 配置数组也需要添加 `html` 文件路径。

### 4. 配置 PostCSS

如果项目中之前已经使用了 PostCSS 插件，我们只需要在 `postcss.config.js`中添加 tailwindcss相关的配置；如果项目之前没有使用 PostCSS 插件，那我们需要在项目根路径创建文件 `postcss.config.js`，并添加如下配置；

```javascript
// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```

### 5. 构建工具集成 PostCSS插件（让PostCSS插件开始工作）

> 📌 Vite、Create react app 内部集成了postcss插件，可以忽略这一步

- Rspack

```javascript
/**
 * @type {import('@rspack/cli').Configuration}
 */

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "postcss-loader",
          },
        ],
        type: "css",
      },
    ],
  }
};
```

- webpack

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader"
          },
        ],
      },
    ],
  },
};
```

### 6. 项目全局CSS文件中添加 TailwinCSS 依赖内容

```javascript
// index.css

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

至此，我们完成了使用 TailwindCSS 的所有配置，接下来是如何使用 TailwindCSS 美化页面。

在此之前我们需要**启动**或者**重启**本地开发服务器

```javascript
npm run dev
```

## 使用效果

> 使用TailwindCSS 画一个正方形

```javascript
<div className='border border-lime-600 w-32 h-32'></div>
```

![](https://cdn.portal.levenx.com/levenx-world/1ba1e0d189cb4a7ebcc2b3862b2d3f01.png)

## 总结

TailwindCSS 的开始步骤看着比较多，但是真正按照步骤动手启动可能只需要几分钟，更多的内容是我想跟大家分享具体的作用，也方便大家能够对 TailwindCSS 有个较为清晰的理解。

更多的 TailwindCSS 相关的内容分享，前往 [TailwindCSS 使用指南
](https://www.levenx.com/guide/how-to-using-tailwindcss?enter_from=article_recommend)


TailwindCSS近年来在前端圈非常流行，它摆脱了原有的CSS限制，以灵活实用为卖点，用户通过各种class组合即可构建出漂亮的用户界面。对于初学者而言，可能需要一些上手成本，一旦掌握实用技巧后，TailwindCSS会是我们开发工作中的出鞘利刃。TailwindCSS开发期间碰到过TailwindCSS相关的各种问题。想着把TailwindCSS的使用技巧和踩坑经验记录下来，分享给

在前端项目中开始使用 TailwindCSS

## TailwindCSS 多主题色配置

> 现在大多数网站都支持主题色变换，比如切换深色模式。那么我们该如何进行主题色配置呢？

### tailwind dark

> tailwind 包含一个 `dark`变体，当启用深色模式时，可以为网站设置不同样式

```html
<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>
```

#### 启用深色模式

> tailwind.config.js 文件darkMode选项默认是false，需要启用深色模式，则可以设置为 media 或者 class
>
> 启动了深色模式后， `dark:{class}`类将会优先于无前缀的类

默认情况下，`dark` 变体只对 `backgroundColor`、`borderColor`、`gradientColorStops``placeholderColor` 和 `textColor` 启用。

1. media（通过用户的操作系统进行控制）
   ```js
   // tailwind.config.js
   module.exports = {
    darkMode: 'media',
    // ...
   }
   ```
2. class （手动控制，HTML树中出现 `dark`类时起作用）
   ```js
   // tailwind.config.js
   module.exports = {
    darkMode: 'class',
    // ...
   }
   ```

这种操作可以实现模式切换，但是也不难看出，class中使用dark:{class} 还是比较繁琐的，而且不易查找和修改，并且无法实现多种主题色配置

### 自定义配置主题色

想要配置不同的主题色，那么就希望配置的颜色可以在不同主题下进行变化。那么如何实现这样的能力呢？我们可以在最外层dom结构上配置不同的类，不同类下的颜色赋予不同值，那么就可以实现多种主题色的切换了，是不是感觉实现很简单，接下来介绍一下代码项目不同主题色的配置。

以小程序（taro + react + rtk）进行介绍，其他原理类似

* 首先需要建立一个主题文件夹放置我们需要配置的不同主题的css
  theme

  ```scss
  .textLight1 {
    /* text */
    --t-1: #1c1d1f;
    --t-2: #58647a;
    --t-3: #8390a8;
  }
  ```
  ```scss
  .textDark1 {
    /* text */
    --t-1: #fafafa;
    --t-2: #d2d3d6;
    --t-3: #9fa4ad;
  }
  ```
  以此类推 相同的的变量key值对应不同的value值
* 其次需要在入口处引入我们的主题文件 并在配置文件中加入我们定义的变量
  app.css

  ```scss
  @import './theme';
  ```
  tailwind.config.js

  ```js
  // Example `tailwind.config.js` file
  const colors = require('tailwindcss/colors')

  module.exports = {
    theme: {
      colors: {
        /* text */
        't-1': 'var(--t-1)',
        't-2': 'var(--t-2)',
        't-3': 'var(--t-3)',
      },
    },
  }
  ```
* 有了主题文件跟对应的主题类名 `textLight1textDark1`...，我们便可以进行切换了 在外层包裹组件中使用对应的类名 就可以达到切换主题的效果。

  > 注意在组件中需要使用对应的key值才会有该效果
  >
  > ```tsx
  >  <Text className="text-t-1">Test</Text>
  > ```
  >


现在大多数网站都支持主题色变换，比如切换深色模式。那么我们该如何进行主题色配置呢？tailwinddarktailwind包含一个dark变体，当启用深色模式时，可以为网站设置不同样式&lt;divclass="bg-whitedark:bg-gray-800"&gt;&lt;h1class="text-gray-900dark:text-white"&gt;Da

TailwindCSS 多主题色配置

## 背景

在移动端项目，一般为了让线条看起来更细、更锐利，此时使用0.5px的线条是非常合适的。那么如何使用TailwindCSS画一条0.5px的线条呢？

在实现这个需求的时候，首先去TailwindCSS官网查了一下border有没有对应的内置工具类，发现内置的线条最细的是1px；所以我们需要自定义配置 TailwindCSS 的 `space`属性。下面将详细说明如何配置。

## 两种配置实现

### 方式一

基于配置spacing

```javascript
const plugin = require("tailwindcss/plugin");

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {},
  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        ".border-half": {
          "border-width": "0.5px",
        },
      };
      addUtilities(newUtilities);
    }),
  ],
};
```

在这个配置方式中，我们自定义plugin插件，插件的作用是添加了一个新的工具类 `.border-half`来表示0.5px的边框宽度。

在HTML上添加**`.border-half`**，然后看看效果

```javascript
<div className="border-half border-black h-24 w-24"></div>
```

![Untitled.png](https://cdn.portal.levenx.com/levenx-world/KN_wr3X0MkuwvpwT.png)

### 方式二

配置对应的特定属性：`borderWidth`

```javascript
module.exports = {
    theme: {
        extend: {
            borderWidth: {
                '0.5': '0.5px',
            },
        },
    }
};
```

在HTML上添加**`.border-0.5`**，然后看看效果

```javascript
<div className="border-0.5 border-black h-24 w-24"></div>
```

![Untitled.png](https://cdn.portal.levenx.com/levenx-world/u0_6lUWpP_2wVYD1.png)

## 总结

本篇教程通过两种方式实现 Tailwind CSS 创建一条 0.5px 线的需求，希望能够帮助到有疑问的朋友～


在移动端项目，一般为了让线条看起来更细、更锐利，此时使用0.5px的线条是非常合适的。那么如何使用TailwindCSS画一条0.5px的线条呢？在实现这个需求的时候，首先去TailwindCSS官网查了一下border有没有对应的内置工具类，发现内置的线条最细的是1px；所以我们需要自定义配置TailwindCSS的space属性。下面将详细说明如何配置。两种配置实现方式一基于配置spaci

TailwindCSS 如何画一条0.5px的线

# 前言

当我们刚开始使用tailwindcss框架处理项目中的样式，我相信很多人会跟我一样非常不习惯。tailwindcss默认支持的rem单位，而不是我们已经非常习惯的px，这其实给我们带来了不小的心智负担。

这篇文章将介绍如何在项目中使用px单位设置元素的属性。

# 方案一

tailwindcss 默认支持灵活设置元素距离属性，比如给div加一个16px的内边距，在属性后通过[]来设置具体的px；

```jsx
<div className="p-[16px]">index</div>
```

效果图

![](https://cdn.fmlg1688.cn/levenx-world/tlL8lbXm9dwdndzp.png)

# 方案二

通过修改 ` tailwind.config.js`配置文件中的theme属性，比如说我想配置成0 ～ 1000 这个范围内的数字都是px单位，具体配置如下

```jsx
/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: {
    enabled: false,
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
  },
  content: [],
  theme: {
    spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {
      map[index] = `${index}px`;
      return map;
    }, {}),
    extend: {},
  },
  plugins: [],
};
```

具体项目效果图：给div加一个16px的内边距

![](https://cdn.fmlg1688.cn/levenx-world/Oq3KxdfX1eWTytn9.png)

对比没有自定义config的效果

![](https://cdn.fmlg1688.cn/levenx-world/U8na0KLFORwmtRFk.png)

# 更加详细的属性定制化

## 一、文字font-size单位改成px

tailwindcss 默认给开发者提供了一些文字大小相关的类

```js
fontSize: {
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.25rem' }],
      base: ['1rem', { lineHeight: '1.5rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1' }],
      '8xl': ['6rem', { lineHeight: '1' }],
      '9xl': ['8rem', { lineHeight: '1' }],
    }
```

同样的，我们也可以自己通过修改tailwind的配置文件来将tailwind的文字单位改成px

```js
module.exports = {
  ...,
  theme: {
    spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {
      map[index] = `${index}px`;
      return map;
    }, {}),
    extend: {
      fontSize: ({ theme }) => ({
        ...theme("spacing"),
      }),
    },
  }
};
```

看看效果，给文字设置font size为22px；

![](https://cdn.fmlg1688.cn/levenx-world/GqTfmHI87-KbdEMd.png)


# 总结

tailwindcss 是非常灵活的css框架，我们可以通过自定义config文件来定制属于我们自己项目的个性配置。更多的配置后续文章会陆续介绍，敬请关注。


当我们刚开始使用tailwindcss框架处理项目中的样式，我相信很多人会跟我一样非常不习惯。tailwindcss默认支持的rem单位，而不是我们已经非常习惯的px，这其实给我们带来了不小的心智负担。这篇文章将介绍如何在项目中使用px单位设置元素的属性。方案方案一tailwindcss默认支持灵活设置元素距离属性，比如给div加一个16px的内边距，在属性后通过[]来设置具体的px；

tailwindcss 如何配置默认单位为px

## 前言

placeholder 在前端多用于 input、textarea 等任何输入或者文本区域的标签，它用户在用户输入内容之前显示一些提示。浏览器自带的 placeholder 样式可能不符合设计规范，此时就需要通过 css 进行样式美化。

当项目中使用 TailwindCSS 处理样式时，应该如何通过 TailwindCSS 设置 placeholder 的样式呢？

## 问题

将 input 标签的 placeholder 样式设置成字体加粗、颜色为红色。

![Untitled.png](https://cdn.portal.levenx.com/levenx-world/ko1UfuV_vOhmoz5q.png)

## 样式配置

### TailwindCSS 方式

```javascript
<input
    className="border placeholder:text-red-900 placeholder:font-bold"
    placeholder="请输入你的昵称"
 />
```



![](https://cdn.portal.levenx.com/levenx-world/aYQmzZlrmM-kHxPF.png)

具体说明，TailwindCSS 支持了placeholder 修饰符，结合 TailwindCSS 支持的样式类，即可实现对 placeholder 的样式修改。

- `placeholder:text-red-900` 修改 placeholder 的字体颜色；
- `placeholder:font-bold` 修改 placeholder 字重；
- `placeholder:text-lg` 修改 placeholder 字体大小；
- 等等……

### 传统方式

1. input标签上定义id或者class；

   ```javascript
   <input
       id="input"
       placeholder="请输入你的昵称"
    />
   ```
2. 在style文件中设置 placeholder 样式；

   ```javascript
   /* CSS3 标准 - Firefox, Chrome, Opera等 */
   #input::placeholder {
     color: red;
     font-weight: 700;
   }
   ```

![](https://cdn.portal.levenx.com/levenx-world/--rfffqrMFWei111.png)

## 总结

TailwindCSS 设置 placeholder 的样式相比于传统方式，继续保持了 TailwindCSS 本身的样式内聚的优点，只需要设置节点的 class 内容，一如既往的便捷。


前言placeholder在前端多用于input、textarea等任何输入或者文本区域的标签，它用户在用户输入内容之前显示一些提示。浏览器自带的placeholder样式可能不符合设计规范，此时就需要通过css进行样式美化。当项目中使用TailwindCSS处理样式时，应该如何通过TailwindCSS设置placeholder的样式呢？问题将input标签的placeholder样式设置成字体

TailwindCSS 如何设置 placeholder 的样式

# 前言

文本文字超长截断并自动补充省略号，这是前端日常开发工作中常用的样式设置能力，文字超长截断主要分为单行超长截断和多行超长截断。本文通过介绍基本CSS样式、tailwindcss 类设置两种基础方式来实现文字超长截断。

# TailwindCSS 设置

## 单行文字超长截断

1. tailwindcss 多个基础类组装

```css
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">测试测试测试测试测试测试</div>
```

1. tailwindcss 直接设置特定类 `truncate`

```css
<div class="truncate">测试测试测试测试测试测试</div>
```

![](https://cdn.fmlg1688.cn/levenx-world/FPHOvIehLkUDOHek.png)

## 多行文字超长截断

如果你想支持多行文本超长截断，可以通过使用 `tailwind-line-clamp`插件来实现。

参考如下具体步骤

1. 安装 npm 依赖包；

```css
npm install tailwindcss-line-clamp -D
```

1. tailwindcss.config.js 配置插件；

```css
// tailwind.config.js

module.exports = {
	...,
  plugins: [
    require("@tailwindcss/line-clamp"),
  ],
};
```

1. 设置目标行数的类.line-clamp-{n}，可以将本本限制在指定的行数。比如设置文本超出两行后截断添加省略号；

```css
<div class="line-clamp-2">测试测试测试测试测试测试</div>
```

![](https://cdn.fmlg1688.cn/levenx-world/mNeEuZRlxDlbYVu9.png)


# 基本CSS设置

css处理文字截断是通过text-overflow属性实现，用于指定元素中文本溢出时如何进行截断。

## 单行文字超长截断

```css
.text {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出文本 */
  text-overflow: ellipsis; /* 使用省略号截断溢出文本 */
}
```

## 多行文字超长截断

对于多行文本末尾省略号，通过设置 `-webkit-line-clamp`属性来指定行数。

```css
.text {
  display: -webkit-box; /* 将元素作为弹性伸缩盒子展示 */
  -webkit-line-clamp: 2; /* 限制文本行数为 2 行 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子为垂直方向 */
  overflow: hidden; /* 隐藏溢出文本 */
  text-overflow: ellipsis; /* 使用省略号截断溢出文本 */
}
```


文本文字超长截断并自动补充省略号，这是前端日常开发工作中常用的样式设置能力，文字超长截断主要分为单行超长截断和多行超长截断。本文通过介绍基本CSS样式、tailwindcss类设置两种基础方式来实现文字超长截断。TailwindCSS设置单行文字超长截断tailwindcss多个基础类组装&lt;divclass="overflow-ellipsisoverflow-hiddenwhitesp

TailwindCSS 支持文本文字超长溢出截断、文字文本省略号

## 前言

TailwindCSS 作为一种功能类优先的 CSS 框架，其简洁和高度可定制的设计理念受到了前端开发者的广泛欢迎。CSS 变量（也称为 CSS 自定义属性）是现代前端开发的一部分，能够带来更高的灵活性和维护性。那么，如果你想在 TailwindCSS 中利用 CSS 变量的强大功能，应该怎么做呢？以下是一份简明指南。

## 什么是 CSS 变量？

在深入了解如何在 Tailwind 中使用 CSS 变量之前，让我们快速地回顾一下 CSS 变量是什么。

CSS 变量，也称作自定义属性，允许你存储一个值，然后在整个文档中重复使用它。它们通常以两个连字符（`--`）开头，例如：

```css
:root {
  --main-color: #3490dc;
}
```

然后你可以这样使用它：

```css
.button {
  background-color: var(--main-color);
}
```

这对于在多处使用同一个值（例如主题色彩或间距）时非常有帮助。

## 在 TailwindCSS 中使用 CSS 变量

TailwindCSS 提供了一个高度定制的配置文件 `tailwind.config.js`，你可以在这里设置自己的样式，包括注册新的 CSS 变量。

### 步骤 1: 修改 TailwindCSS 配置文件

打开 `tailwind.config.js` 文件，加入你的 CSS 变量定义：

```javascript
module.exports = {
  theme: {
    extend: {
      // 在这里加入你的 CSS 变量
      colors: {
        'primary': 'var(--color-primary)',
      },
      spacing: {
        'large': 'var(--spacing-large)',
      }
    }
  }
}
```

### 步骤 2: 在 CSS 中声明你的变量

在你的 CSS 文件，通常是 `styles.css` 或者 `index.css` 中，你可以定义这些 CSS 变量：

```css
:root {
  --color-primary: #3490dc;
  --spacing-large: 32px;
}
```

### 步骤 3: 使用你的变量

现在你可以在你的 HTML 中使用这些定制的 Tailwind 类了：

```html
<button class="bg-primary p-large">
  点击我！
</button>
```

这个按钮将会有一个背景色 `#3490dc` 和 `32px` 的填充。

### 步骤 4: 在响应式设计中使用变量

TailwindCSS 支持响应式设计，你也可以将 CSS 变量与响应式前缀结合使用：

```css
:root {
  --spacing-base: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
}

@media (min-width: 768px) {
  :root {
    --spacing-base: var(--spacing-md);
  }
}

@media (min-width: 1024px) {
  :root {
    --spacing-base: var(--spacing-lg);
  }
}
```

然后在 Tailwind 的配置文件里使用它们：

```javascript
module.exports = {
  theme: {
    extend: {
      spacing: {
        'base': 'var(--spacing-base)',
      }
    }
  }
}
```

这样你就可以在不同屏幕尺寸下使用不同的间距了。

## 总结

使用 CSS 变量可以让你的 TailwindCSS 项目更加灵活和易于维护。你可以定义一系列的主题颜色，间距大小或者字体尺寸，然后在整个项目中复用它们。结合 TailwindCSS 的功效类，你可以快速搭建出既美观又保持一致性的前端页面。

随着前端技术的发展，你可以通过这些方法将现代 CSS 功能融入到 TailwindCSS 的工作流中，既保留了 Tailwind 的实用性，也享受到 CSS 自定义属性带来的好处。


TailwindCSS作为一种功能类优先的CSS框架，其简洁和高度可定制的设计理念受到了前端开发者的广泛欢迎。CSS变量（也称为CSS自定义属性）是现代前端开发的一部分，能够带来更高的灵活性和维护性。那么，如果你想在TailwindCSS中利用CSS变量的强大功能，应该怎么做呢？以下是一份简明指南。什么是CSS变量？在深入了解如何在Tailwind中使用CSS变量之前，让我们快速地回顾一下CSS变

如何在 TailwindCSS 中使用 CSS 变量

## 前言

动画是现代网页设计中不可或缺的一部分，它们可以指引用户的注意力，增加交互性，以及提升用户体验。TailwindCSS 作为一个功能强大的工具类 CSS 框架，为我们添加和控制动画提供了一系列便捷的方式。

本文将演示如何使用 TailwindCSS 来处理和激活网页动画，使你的网站看起来更加生动。

## TailwindCSS 动画基础

TailwindCSS 中处理动画的核心是 `transition` 和 `animation` 实用类。通过这些类，你可以定义元素状态变化的过渡效果，或者添加复杂的关键帧动画。

### 过渡动画（Transition）

过渡动画是当元素的某些属性变化时，这种变化发生的方式。例如，当鼠标悬停在按钮上时，按钮的背景颜色可能会渐变为另一种颜色。

```html
<button class="bg-blue-500 text-white px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-blue-700">
  悬停我!
</button>
```

在上面的例子中，我们使用了几个 TailwindCSS 类：

- `transition`: 应用过渡效果。
- `duration-300`: 过渡时长设置为 300ms。
- `ease-in-out`: 过渡的缓动函数。
- `hover:bg-blue-700`: 定义悬停状态下的背景颜色。

当用户把鼠标悬停在按钮上时，背景颜色会在 300 毫秒内平滑过渡到深蓝色。

### 关键帧动画（Animation）

关键帧动画允许你创建复杂的动画序列，通过定义动画的关键点来实现。

首先，你需要在你的 CSS 文件中定义一个关键帧动画：

```css
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

然后，你可以在 TailwindCSS 中使用动画实用类来应用这个动画：

```html
<div class="animate-spin">
  <img src="spinner.png" alt="加载中">
</div>
```

你还可以控制动画的持续时间、延迟、迭代次数等：

- `animate-spin`: 应用名为 `spin` 的关键帧动画。
- `duration-2000`: 动画持续时间为 2000ms。
- `delay-150`: 动画延迟 150ms 开始。
- `repeat-3`: 动画重复 3 次。

例如：

```html
<div class="animate-spin duration-2000 delay-150 repeat-3">
  <img src="spinner.png" alt="加载中">
</div>
```

### 自定义动画

TailwindCSS 提供了一套默认的过渡和动画效果，但是你可能想要创建一些定制化的动画。这可以通过修改 TailwindCSS 配置文件来实现。

假设我们想要添加一个 `bounce` 动画，首先定义关键帧：

```css
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
```

接着，在 `tailwind.config.js` 中扩展 `animation` 主题：

```javascript
module.exports = {
  theme: {
    extend: {
      animation: {
        bounce: 'bounce 1s infinite'
      }
    }
  }
}
```

现在，你可以像使用其他 Tailwind,实用类一样使用你的自定义 `bounce` 动画：

```html
<div class="animate-bounce">
  <img src="bouncing-ball.png" alt="弹跳的球">
</div>
```

这段 HTML 代码表示图片会应用 `bounce` 动画，动画时长是 1 秒，并且会无限次重复。

## 总结

以上的步骤展示了如何在 TailwindCSS 中创建和应用动画，我们可以总结如下几点：

1. **使用过渡类创建简单动画**：为元素添加 `transition` 类和相关的响应类（例如 `hover:`, `focus:` 等）可以很容易地创建过渡效果。
2. **应用关键帧动画**：通过在 CSS 中定义 `@keyframes` 和在 HTML 中使用 `animate-` 类，可以实现复杂的动画效果。
3. **自定义动画**：通过编辑 `tailwind.config.js` 文件，可以添加自定义的动画效果以适应你的设计需求。

尽管 TailwindCSS 提供了强大的工具类来处理动画，但为了保持性能和效果的最佳平衡，以下几点建议是值得考虑的：

- **限制动画的复杂度**：过于复杂的动画不仅会影响性能，还可能分散用户的注意力。
- **考虑动画的可访问性**：某些用户可能对动画有敏感性，提供关闭动画的选项是一个好习惯。
- **响应式动画**：在不同设备上测试你的动画，确保它们在所有屏幕大小上都能良好地工作。


动画是现代网页设计中不可或缺的一部分，它们可以指引用户的注意力，增加交互性，以及提升用户体验。TailwindCSS作为一个功能强大的工具类CSS框架，为我们添加和控制动画提供了一系列便捷的方式。本文将演示如何使用TailwindCSS来处理和激活网页动画，使你的网站看起来更加生动。TailwindCSS动画基础TailwindCSS中处理动画的核心是transition和animation实用类

精通CSS动画：基于 TailwindCSS 轻松添加动画效果

## 前言

TailwindCSS 是一个功能类优先的 CSS 框架，它允许开发者通过组合不同的工具类来快速构建自定义的用户界面。设置全局字体及给特定元素设置字体是前端开发中的常见需求，TailwindCSS 为这一需求提供了简单有效的解决方案。接下来，我们将一步步地探讨如何在 TailwindCSS 中实现字体设置。

## 字体文件引入

一旦选择了字体，你需要将它们添加到你的项目中。这里有两种常见的方法：使用在线字体服务或自托管字体文件。

**使用在线字体服务:**

例如，如果你使用Google 字体，你可以在HTML文件的 `<head>`部分添加一个 `<link>`标签：

```html
<head>
  
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
</head>
```

**自托管字体文件:**

如果你选择自托管字体文件，你需要将字体文件放入你的项目目录，然后使用 `@font-face`在CSS中声明字体。例如：

```css
@font-face {
  font-family: 'MyCustomFont';
  src: url('/path-to-fonts/my-custom-font.woff2') format('woff2'),
       url('/path-to-fonts/my-custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
```

确保将字体文件放在可通过网络访问的位置，并且在 `@font-face`规则中正确地引用路径。

## 设置全局字体

在 TailwindCSS 中设置全局字体非常简单。你需要在 `tailwind.config.js` 文件中配置 `theme` 的 `extend` 部分来自定义字体。

首先，你需要确定你想要使用的字体，并将其包含在你的项目中。你可以通过使用 @font-face 规则、从 Google 字体等服务导入字体，或者使用系统字体。

接着，配置 `tailwind.config.js` 文件以使用这些字体。以下是一个如何配置全局字体的例子：

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'], // 使用 'Inter' 作为主要的无衬线字体
        serif: ['Georgia', 'serif'],   // 使用 'Georgia' 作为主要的衬线字体
      },
    },
  },
}
```

在此配置中，我们设置了两个字体堆栈：一个是 `sans` 类型的 `Inter` 字体，另一个是 `serif` 类型的 `Georgia` 字体。此操作将覆盖 TailwindCSS 默认的字体堆栈。

现在，在 HTML 中，你可以通过使用 `font-sans` 或 `font-serif` 类来应用全局字体：

```html
<body class="font-sans">
  
</body>
```

## 给特定元素设置字体

有时候，你可能只想要为页面上的特定元素设置不同的字体。这同样可以在 `tailwind.config.js` 文件中通过添加额外的字体堆栈来完成。

例如，假设你想要为所有标题元素设置一个特殊的字体：

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        heading: ['Poppins', 'sans-serif'], // 添加一个名为 'heading' 的自定义字体堆栈
      },
    },
  },
}
```

现在，你可以在 HTML 中使用 `font-heading` 类来为任何元素指定这个字体：

```html
<h1 class="font-heading">
  
</h1>
```

## 注意事项  

当你为项目引入外部字体时，请确保遵守版权和使用许可。

在生产环境中使用字体时，考虑使用字体子集或字体显示策略，比如 `font-display: swap;`，以优化性能和用户体验。

如果你使用的是 TailwindCSS 的 JIT（Just-In-Time）模式，你可以在开发过程中即时生成任何你需要的工具类。

TailwindCSS是一个功能类优先的CSS框架，它允许开发者通过组合不同的工具类来快速构建自定义的用户界面。设置全局字体及给特定元素设置字体是前端开发中的常见需求，TailwindCSS为这一需求提供了简单有效的解决方案。接下来，我们将一步步地探讨如何在TailwindCSS中实现字体设置。字体文件引入一旦选择了字体，你需要将它们添加到你的项目中。这里有两种常见的方法：使用在线字体服务或自托管

TailwindCSS 如何设置全局字体以及给特定元素设置字体

## 背景 

TikTok作为目前全世界最受欢迎的APP，需要考虑兼容全世界各个地区的本地化语言和阅读习惯。其中对于阿拉伯语、波斯语等语言的阅读书写习惯是从右向左的，在前端有一个专有名字RTL模式，即Right-to-Left。

其中以阿拉伯语作为第一语言的人口超过2.92亿，对于这个庞大的市场，App、Web网站等都需要考虑RLT布局。那么TailwindCSS应该如何处理RTL布局模式？

## LTR模式 vs RTL模式

从普通网页中检查发现，html上的CSS默认方向是LTR。即页面上的内容是从左往右阅读的。尝试在html标签上设置网页显示方向dir=”rtl“

```jsx
<!DOCTYPE html>
<html dir="rtl">
</html>
```

下面两张图片是LTR模式与RTL模式的展示效果

![Untitled](https://cdn.portal.levenx.com/levenx-world/10f9c3edaaf94b478ade996082c082d7.blob)

![Untitled](https://cdn.portal.levenx.com/levenx-world/e1a043807b96431ebea1052f7925c72d.blob)

**分析**

RTL模式下文字从居左变成居右；两个方块左右调换了位置。

## TailwindCSS RTL 实战

即然通过设置html标签上dir属性就能够设置RTL，那么还需要TailwindCSS做特殊处理吗？答案是肯定的，有一些情况需要在RTL模式下做特殊的布局。

例如 LTR 模式下设置了左内边距4px，在对应的RTL模式下应该转变成右内边距4px，实际情况是这样吗？

**我们做个测试看看**

![Untitled](https://cdn.portal.levenx.com/levenx-world/23a864d2721f4864aa3d1eaca7b39dad.blob)

![Untitled](https://cdn.portal.levenx.com/levenx-world/e6e24814800c4cd4b371f57ca3e8a9a0.blob)

可以看到，某个方向的内边距并不会随着dir的改变而改变，RTL模式下的文字已经贴边了。

**利用TailwindCSS 提供的rtl指令做特殊布局的配置，设置形式 `ltr:class` 、 `rtl:class`**

现在实现上面的需求： LTR模式设置左内边距，RTL模式设置右内边距；

**重点：html标签上必须设置dir属性；**

```jsx
<div className="ltr:pl-6 rtl:pr-6">乐闻世界</div>
```

效果符合预期

![Untitled](https://cdn.portal.levenx.com/levenx-world/efe8840a302548deb97ea739d0609c6c.blob)

![Untitled](https://cdn.portal.levenx.com/levenx-world/f96c7e06846745a3be496e0de2eb81b1.blob)

## 总结

基于实战情况，对于某些 `dir=rtl`不能处理的RTL布局，通过 `ltr:` 、 `rtl:` 条件指令定制化的设置，这个就是不同的需求需要不同的设置了。

## 附加信息

上面实战的内边距问题，其实TailwindCSS支持了新的样式类，ps 、pe、ms、me即设置对应的边距，然后也不需要ltr、rtl特殊处理了。

前提是TailwindCSS版本升级到**≥3.3.2**


TikTok作为目前全世界最受欢迎的APP，需要考虑兼容全世界各个地区的本地化语言和阅读习惯。其中对于阿拉伯语、波斯语等语言的阅读书写习惯是从右向左的，在前端有一个专有名字RTL模式，即Right-to-Left。其中以阿拉伯语作为第一语言的人口超过2.92亿，对于这个庞大的市场，App、Web网站等都需要考虑RLT布局。那么TailwindCSS应该如何处理RTL布局模式？LTR模式vsRT

TailwindCSS 如何处理RTL布局模式

# 问题

对于初学者来说，这些配置其实是比较复杂的，这也是tailwindcss最大的入手成本，开发者的记忆负担和心智负担也都比较大。

有没有办法能够直观的看到项目中实际有效的类和属性呢？

# 工具

> NPM包
>
> tailwind-config-viewer
>
> [https://npm.devtool.tech/tailwind-config-viewer](https://npm.devtool.tech/tailwind-config-viewer)

## 使用步骤

1. 安装npm依赖

   ```bash
   pnpm install tailwind-config-viewer
   或
   pnpm add tailwind-config-viewer

   ```
2. 新增 `package.json`中 script 命令

   ```js
   "scripts": {
     "tailwind-config-viewer": "tailwind-config-viewer -o"
   }

   ```
3. 启动tailwindcss viewer

   ```js
   npm run tailwind-config-viewer
   或者
   pnpm add tailwind-config-viewer

   ```
4. 访问localhost:3000

   ![](https://cdn.fmlg1688.cn/levenx-world/yJtMIrfwACGSb2-N.png)

   如果你想直接查看 `tailwindcss`默认的配置效果，可以尝试访问链接[https://rogden.github.io/tailwind-config-viewer/](https://rogden.github.io/tailwind-config-viewer/)

   开发的时候可以直接在页面上直观的看到样式的效果，以及如果能够定位自己设置的样式到底是不是正确的，到底存不存在。
5. 尝试自定义theme color，比如新增一个自定义customColor颜色

   ```js
   // tailwind.config.js

   module.exports = {
   	...
     theme: {
       colors: ({ colors }) => {
         return { customColor: "red", ...colors };
       }
     }
   };
   ```

![](https://cdn.fmlg1688.cn/levenx-world/HmF-bCUyrTy9ga5O.png)


tailwindcss框架为我们提供了大量默认的类和属性，而且开发者也能够自定义类和配置。对于初学者来说，这些配置其实是比较复杂的，这也是tailwindcss最大的入手成本，开发者的记忆负担和心智负担也都比较大。有没有办法能够直观的看到项目中实际有效的类和属性呢？工具NPM包tailwind-config-viewerhttps://npm.devtool.tech/tailwind-con

Tailwindcss 配置检查器 - 可视化查看tailwindcss config最终效果

## 前言

Tailwind CSS 通过提供原子类使得样式的应用变得非常快速和高效，有时候我们需要在 Tailwind 的标准颜色集以外添加一些自定义颜色。

在本教程中，将介绍如何在不删除默认颜色集的情况下，向 Tailwind CSS 添加新的颜色。

## 实现步骤

## 一、定制 `tailwind.config.js`

若要添加自定义颜色，需要在项目根目录下找到或创建一个 `tailwind.config.js` 配置文件。这个文件将用于覆盖 Tailwind CSS 默认配置。

```javascript
module.exports = {
  // 其他配置...
  theme: {
    extend: {
      colors: {
        // 在这里添加新的颜色
      },
    },
  },
  // 其他配置...
};
```

## 二、添加新颜色

在 `colors` 对象中，你可以直接添加新的颜色名称和对应的值。为了保持原有颜色，我们使用 `extend` 关键字，这将保证我们添加的颜色只是扩展了默认的颜色集，而不是替换掉它们。

```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#5B83AD',
        'custom-pink': {
          light: '#F3D1D1',
          DEFAULT: '#F28B9B',
          dark: '#F06D80',
        },
      },
    },
  },
  // 其他配置...
};
```

在上面的例子中，我们添加了一个名称为 `custom-blue` 的颜色，并且为 `custom-pink` 提供了三个色阶：light、DEFAULT 和 dark。

## 三、使用新颜色  

一旦你添加了新颜色，就可以在项目的 HTML 文件中像使用 Tailwind 的其他样式类一样使用它们了。

```html

<div class="bg-custom-blue text-white p-5">Hello, Custom Blue!</div>


<div class="bg-custom-pink-light p-5">Light Pink</div>
<div class="bg-custom-pink p-5">Default Pink</div>
<div class="bg-custom-pink-dark text-white p-5">Dark Pink</div>
```

## 总结

上述步骤成功地为 Tailwind CSS 添加了新的颜色，并且完全保留了原有的颜色集，现在可以在项目中自由地使用这些颜色，享受 Tailwind CSS 提供的灵活性和自定制能力。

TailwindCSS通过提供原子类使得样式的应用变得非常快速和高效，有时候我们需要在Tailwind的标准颜色集以外添加一些自定义颜色。在本教程中，将介绍如何在不删除默认颜色集的情况下，向TailwindCSS添加新的颜色。实现步骤一、定制tailwind.config.js若要添加自定义颜色，需要在项目根目录下找到或创建一个tailwind.config.js配置文件。这个文件将用于覆盖Ta