Tailwind CSS 是一个非常强大且受欢迎的实用型 CSS 框架，于2017年由.Adam Wathan、Jonathan Reinink、David Hemphill 和 Steve Schoger 共同创立。 这个框架的主要目标是帮助开发者快速构建定制化的用户界面，而无需从头开始编写 CSS 代码。
Tailwind 提供了一整套预先定义好的类名，代表 CSS 的各种属性，如颜色、字体大小、间距等。这些实用类能支持你快速完成布局，同时保持简洁无冗余代码。
通过采用响应式类，Tailwind 可以帮助你无缝地构建适应各种屏幕尺寸的应用程序。
使用Tailwind 的高度可配置性，你可以根据项目需求定制自己的设计系统。举例来说，你可以轻松地添加、编辑或删除颜色、字体等相关设置。
Tailwind 采用PostCSS 插件系统，将实用类生成的 CSS 打包压缩为最小，可优化加载速度。
 Tailwind 提供了一整套官方插件，如动画库、表单控件等。此外，开发社区也贡献了大量非官方插件和资源，让开发者能够选择更加丰富的功能。
Tailwind CSS 广泛应用于以下场景：
- 前端项目：无论是使用纯 HTML 结构还是结合 JavaScript 框架（例如：React、Vue 和 Angular），Tailwind 都能实现高度定制化的用户界面。
- Web 应用程序： 开发具有复杂交互和列表式布局的应用界面。
- 电子邮件： 利用 "tailwindcss-inline" 工具，可以为 HTML 邮件模板生成内联样式。
- 营销页面： 使用 Tailwind 创建具有吸引力的营销页面和布局，可轻松快速地进行样式调整。
- 开发原型：快速搭建原型，并便捷地进行迭代。
如此多的优点和特性使得Tailwind CSS变得越来越受欢迎，是一个非常值得学习和尝试的框架。

Tailwind CSS

在React中使用TailwindCSS动态设置背景图像通常涉及到几个步骤。但是，TailwindCSS默认情况下并不直接支持将动态URL用作背景图像，因为它使用PurgeCSS来删除未使用的样式，并且希望在构建时能知道所有可能的类名。要解决这个问题，我们可以使用内联样式或通过修改Tailwind配置来生成必要的背景图像类。下面我将介绍两种方法。

### 方法一：使用内联样式

这是设置动态背景图像的最简单方法，因为它不需要修改TailwindCSS的配置。你可以直接在React组件中使用内联样式来设置背景图像：

```jsx
function MyComponent({ imageUrl }) {
  // 使用内联样式直接设置背景图像
  const style = {
    backgroundImage: `url(${imageUrl})`,
    // 其它你想要添加的TailwindCSS样式
  };

  return <div style={style} className="bg-no-repeat bg-center bg-cover ...">...</div>;
}
```

### 方法二：通过TailwindCSS配置

如果你想使用Tailwind的工具类而不是内联样式，那么你需要在你的`tailwind.config.js`文件中动态地生成背景图像类：

```js
// tailwind.config.js
module.exports = {
  // 其它配置...
  theme: {
    extend: {
      backgroundImage: theme => ({
        'dynamic-pattern': "url('/path/to/image.jpg')", // 用实际的图像路径替换这里
        // 你可以根据需要添加更多背景图像
      }),
    },
  },
  // 其它配置...
}
```

然后在你的React组件中使用这个自定义的背景图像类：

```jsx
function MyComponent() {
  // 假设你已经在tailwind.config.js中添加了名为'dynamic-pattern'的背景图像
  return <div className="bg-dynamic-pattern bg-no-repeat bg-center bg-cover ...">...</div>;
}
```

要使这个方法更加动态，你可以编写一个小的函数，它根据图像URL生成一个唯一的类名，并在构建过程中将此类名和URL添加到配置文件中。然而，这种方法可能会导致配置文件的大小显著增加，并且需要一些自定义逻辑来处理图像URL的插入和类名的生成。

### 注意

两种方法都有其优缺点。使用内联样式是最直接的方法，但它不会利用到Tailwind的PurgeCSS能力，可能会导致样式文件体积增加。通过TailwindCSS配置可能会更符合Tailwind的工作流程，但它可能需要额外的设置，并且在构建时需要知道所有可能的背景图像URL，这可能在某些动态场景下不实际。

选择哪种方法取决于你的具体需求和项目设置。如果背景图像是用户动态生成的内容，方法一可能更合适。如果背景图像可以预先知道，或者是有限的选择集，方法二可能是一个更好的选择。

I think I have found a solution other than simply using a style attribute.

    <div
      style={{'--image-url': `url(${fetchedUrl})`}} 
      className='bg-[image:var(--image-url)]'>
        
    </div>
    

This works perfectly fine.

Although it looks a bit tedious, it can be used to enable the background image on hover, focus, etc. In which the style attribute is incapable of.

    className='hover:bg-[image:var(--image-url)] focus:bg-[image:var(--image-url)] ...'
    

This application of custom properties can be used for implementing dynamic values with tailwind like colors fetched from an API.

    <div
      style={{'--color': fetchedColor}} 
      className='text-[color:var(--color)]'>
        
    </div>

I think the best solution is to do what you suggested and use a style attribute. Tailwind CSS doesn't really deal with dynamic data, but rather with class names to add predefined styles to your element. The best you could without using the style attribute is to conditionally add/remove classNames from an element, but that would require you to know the image URL ahead of time, which defeats the purpose of getting it from an API.

I would do:

    style={{backgroundImage: `url(${fetchedImgSrc})`}}
    

Edit: It looks like you can actually use Tailwind to do something similar to the code above as per [https://tailwindcss.com/docs/background-image](https://tailwindcss.com/docs/background-image). The code looks like:

    <div class="bg-[url('/img/hero-pattern.svg')]">
      
    </div>

you can just use backgroundImage in Style

    const bag2 = "https://via.placeholder.com/500"
    
    <div 
        className = "someting"
        style={{backgroundImage: `url(${bag2})`}}
    
    </div>

Even with the latest implementation of the arbitrary-values - it seems like it's not working for Dynamic URLs. In my case image was coming from an API. If it is the case, stick to style attribute.

In the solution below - bgImage is a prop.

    <div className={`justify-center  bg-no-repeat bg-cover bg-center rounded-lg`} 
    style={{ backgroundImage: `url(${bgImage})`}} >
    
    </div>

How to using dynamic url for background image with tailwindcss react js

在Tailwind CSS中，您可以通过使用预定义的宽度实用类或创建自定义宽度实用类来设置一个元素的宽度为600像素。

1. **使用预定义的宽度实用类（如果存在）：**
   Tailwind CSS 为常用的宽度设置提供了一套预定义的宽度类。但是，在默认配置中，并没有直接对应于600px的宽度类。您可以查看文档或配置文件中的 `theme.width` 部分来确定是否存在适合的预定义宽度。

2. **创建自定义宽度实用类：**
   如果没有预定义宽度匹配600px，您可以在Tailwind的配置文件（`tailwind.config.js`）中扩展默认的宽度设置来添加一个自定义宽度。

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      width: {
        '600': '600px',
      },
    },
  },
  plugins: [],
}
```

这样配置之后，你就可以在HTML中使用 `w-600` 类来将一个元素的宽度设置为600像素了。

```html
<div class="w-600">...</div>
```

当你运行Tailwind CLI工具或者通过构建过程整合Tailwind CSS时，它会生成相应的CSS规则。

请注意，使用自定义值将使您的CSS文件的大小略有增加，因为它会添加额外的类定义。这样做是完全可以接受的，尤其是在项目中确实需要特定像素值的宽度时。

如果您将 Tailwind 安装配置为以即时模式运行，并且运行的是 tailwind 2.1+，则可以使用其任意值支持。[https://tailwindcss.com/docs/just-in-time-mode](https://tailwindcss.com/docs/just-in-time-mode)

例如，我需要 600px 的宽度，我是这样指定的：

`w-[600px]`

您能检查一下下面的代码吗？希望它对你有用。

#1 您需要在 tailwind.config.js 中添加以下代码

    module.exports = {
      theme: {
         extend: {
           width: {
            '600': '600px',
           }
        }
      }
    }
    

#2 之后您可以`w-600`在 HTML 文件中使用，如下所示。

    <div class="w-600">...</div>

您只是缺少括号 \[ \]。尝试这个：

    w-[600px]

看一下大多数 Tailwind 类都有的“任意值”部分。在那里您可以看到如何设置您想要的任何值。

任意值[https://tailwindcss.com/docs/width# Arbitration-values](https://tailwindcss.com/docs/width#arbitrary-values)

> 如果您需要使用一次性宽度值，而该值在主题中包含没有意义，请使用方括号使用任意值动态生成属性。

    <div class="w-[600px]">
      
    </div>

How can i specify exactly 600px width in tailwind css

在Tailwind CSS中，如果您希望建立一个元素填充整个视口的高度，可以使用`h-screen`工具类。这个类的意思是将元素的高度设置为100vh（viewport height，即视口高度）。

例如，如果您有一个容器，您希望它占据整个浏览器窗口的高度，您可以像这样添加类：

```html
<div class="h-screen">
  
</div>
```

这个`div`将会扩展以填满整个视口的高度。

此外，如果您想要一个高度稍微小于100vh的元素，比如考虑到浏览器的地址栏或者底部导航，您可以使用`min-h-screen`来确保元素至少和视口一样高，但可以根据内容的多少变得更高。

如果您需要更细粒度的控制，可以使用`vh`单位和自定义的高度工具类，例如：

```html
<div class="h-[50vh]">
  
</div>
```

这将设置元素的高度为视口高度的50%。

Tailwind CSS提供了响应式的工具类，所以如果您需要在不同的屏幕尺寸下有不同的高度，可以使用前缀来指定：

```html
<div class="h-screen md:h-[75vh] lg:h-[90vh]">
  
</div>
```

在这个例子中，元素默认会占据整个视口的高度，但在中等大小的设备上（md），它的高度将变为视口高度的75%，而在大型设备上（lg），它的高度将变为视口的90%。

总之，使用Tailwind CSS的视口高度工具类是一个快速且响应式的方法来控制元素的高度，确保它们能够适应不同设备的显示需求。

There is a tailwind class named `.h-screen` that translates to `height:100vh;` css. This should work as well. For further details please refer to the [Official Tailwind documentation](https://tailwindcss.com/docs/height/)

You can add `min-h-screen` to the parent `<div>`, this would fill the height of the viewpoint.

And the difference with `h-screen` is that this will stretch over the screen. It would be helpful when the screen is tiny and the content is overflowing with a scrollbar. In this situation the background will not fill the rest of the scrolled-up part.

     <div class="flex items-stretch bg-grey-lighter min-h-screen">
        <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
        <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
        <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
    </div>
    

Link to some snippets at tailwind play (added a background color example to clarify it): [https://play.tailwindcss.com/8Qd822yY4w](https://play.tailwindcss.com/8Qd822yY4w)

You can use `.h-screen` class of [Tailwind CSS](https://tailwindcss.com/docs/height).

I'm using NextJS + tailwindcss. NextJS adds a `<div id="__next">`, so this is what I have in my `global.css`

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    html {
      @apply h-full;
    }
    body {
      @apply h-full;
    }
    div#__next {
      @apply h-full;
    }
    main {
      @apply h-full;
    }
    

And in my page I have

    <main className="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
      ...
    </main>

I know it's an old post, but I found it now, while I was trying to have the background color streched to the size of the screen when the content was too little to fill it and avoid to have the background color to stop suddenly when the content was more of the size of the screen (that happens with h-screen). I solved the problem using min-h-screen.

How to fill the height of the viewport with tailwind css

Tailwind CSS 是一个实用工具优先（utility-first）的 CSS 框架，它通过提供数以千计的小型类（如 `text-center`、`mt-4` 等）来帮助开发者快速构建用户界面。在默认情况下，Tailwind 生成的类名是静态的，并且包含在生成的样式表中。然而，开发者可能需要根据程序的状态动态构建这些类名。

在使用 Tailwind CSS 时，可以通过几种方式来动态地构建类名：

1. **JavaScript 模板字符串**：
   如果你正在使用JavaScript来动态生成HTML，或者使用现代的前端框架，比如React、Vue或Angular，你可以使用模板字符串（Template Literals）来根据条件拼接类名。
   
   例如，在React中：

   ```jsx
   function Button({ primary }) {
     const btnClass = `px-4 py-2 border ${
       primary ? 'bg-blue-500 text-white' : 'bg-transparent text-blue-500'
     }`;

     return <button className={btnClass}>Click me</button>;
   }
   ```

   在这个例子中，根据 `primary` 属性的值，按钮的类名会动态变化。

2. **计算属性**：
   在像Vue这样的框架中，可以使用计算属性（computed properties）来动态生成类名。
   
   例如，在Vue中：

   ```vue
   <template>
     <button :class="buttonClass">Click me</button>
   </template>

   <script>
   export default {
     props: ['primary'],
     computed: {
       buttonClass() {
         return {
           'px-4 py-2 border': true,
           'bg-blue-500 text-white': this.primary,
           'bg-transparent text-blue-500': !this.primary,
         };
       }
     },
   };
   </script>
   ```

   在这个例子中，`buttonClass` 计算属性会返回一个对象，其中包含应该应用于按钮的类名。

3. **类名函数**：
   有时，你可能会写一个函数来生成类名，这在任何 JavaScript 环境中都是可行的。
   
   例如：

   ```javascript
   function createButtonClass(size) {
     return `px-4 py-2 text-${size} border`;
   }
   
   const smallButtonClass = createButtonClass('sm');
   const largeButtonClass = createButtonClass('lg');
   ```

4. **Tailwind 插件**：
   Tailwind CSS 允许通过插件扩展其功能。你可以创建自定义插件来根据需要动态生成样式，尽管这通常是在构建过程中完成的，而不是在客户端运行时。

总结一下，虽然你不能在浏览器中直接让 Tailwind 动态产生未在构建时生成的新类名，但你可以使用JavaScript的逻辑来动态地组合已经存在的类名，并根据应用的状态来切换这些类名。这些方法可以让开发者使用 Tailwind 的实用性而不牺牲动态性。

So after finding out that this way of working is not recommended and that JIT doesn't support it (Thanks to the generous commenters). I have changed the approach to a more 'config' based approach.

Basically I define a const with the basic configuration for the different props and apply those to the component. It's a bit more maintenance work but it does the job.

Here is the example of a config. (Currently without typing) and up for some better refactoring but you'll get the idea.

    const buttonConfig = {
      // Colors
      primary: {
        bgColor: 'bg-primary-500',
        color: 'text-white',
        outline:
          'border-primary-500 text-primary-500 bg-opacity-0 hover:bg-opacity-10',
      },
      secondary: {
        bgColor: 'bg-secondary-500',
        color: 'text-white',
        outline:
          'border-secondary-500 text-secondary-500 bg-opacity-0 hover:bg-opacity-10',
      },
    
      // Sizes
      small: 'px-3 py-2',
      medium: 'px-4 py-2',
      large: 'px-5 py-2',
    };
    

Then I just apply the styling like so:

      <motion.button
        whileTap={{ scale: 0.98 }}
        className={`
        rounded-lg font-bold transition-all duration-100 border-2 focus:outline-none
        ${buttonConfig[size]}
        ${outlined && buttonConfig[color].outline}
        ${buttonConfig[color].bgColor} ${buttonConfig[color].color}`}
        onClick={onClick}
        type="button"
        tabIndex={0}
      >
        {children}
      </motion.button>

this way of writing Tailwind CSS classes [is not recommended](https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html). Even [JIT mode doesn't](https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support) support it, to quote Tailwind CSS docs: "_Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sort of arbitrary dynamic values that change on the client_"

this might be a bit late, but for the people bumping this thread.

the simplest explaination for this is;

**Dynamic Class Name** does not work unless you configured [Safelisting](https://tailwindcss.com/docs/content-configuration#safelisting-classes) for the Dynamic class name,

BUT, **Dynamic Class** works fine so long as its a full tailwind class name.

its stated [here](https://tailwindcss.com/docs/content-configuration#dynamic-class-names)

this will not work

    <div class="text-{{ error ? 'red' : 'green' }}-600"></div>
    

but this one works

    <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
    

its states;

> As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.

**the longer explanation;**

Tailwind will scan all the files specified in `module.exports.content` inside `tailwind.config.js` and look for tailwind classes, it does not even have to be in a class attribute and can even be added in commented lines, so long as the **full class name** is present in that file and class name is not dynamically constructed; Tailwind will pull the styling for that class,

so in your case, all you have to do is put in the full class name inside that file for all the possible values of your dynamic class something like this

    <button className={ color === 'primary' ? 'bg-primary-500' : 'bg-secondary-500'}>
        {children}
    </button>
    

or the method I would prefer

    
    <button className={`bg-${color}-500 `}>
        {children}
    </button>
    

here's another example, although its Vue, the idea would be the same for any JS framework

    <template>
        <div :class="`bg-${color}-100 border-${color}-500 text-${color}-700 border-l-4 p-4`" role="alert">
            test
        </div>
    </template>
    <script>
        /* all supported classes for color props 
        bg-red-100 border-red-500 text-red-700
        bg-orange-100 border-orange-500 text-orange-700
        bg-green-100 border-green-500 text-green-700
        bg-blue-100 border-blue-500 text-blue-700
        */
        export default {
            name: 'Alert',
            props: {
                color: {type: String, default: 'red'}
            }
        }
    </script>
    

and the result would be this

    <Alert color="red"></Alert> 
    <Alert color="orange"></Alert> 
    <Alert color="green"></Alert> 
    <Alert color="blue"></Alert> 
    <Alert color="purple"></Alert>

**EDIT**: Better implementation 2022 - [https://stackoverflow.com/a/73057959/11614995](https://stackoverflow.com/a/73057959/11614995)

Tailwind CSS does not support dynamic class names (see [here](https://tailwindcss.com/docs/content-configuration#dynamic-class-names)). However, there's still a way to accomplish this. I needed to use dynamically build class names in my Vue3 application. See the code example below.

Upon build tailwind scanes your application for classes that are in use and automatically purges all other classes ([see here](https://tailwindcss.com/docs/optimizing-for-production)). There is however a `savelist` feature that you can use to exclude classes from purging - aka they will always make it to production.

I have created a sample code below, that I use in my production. It combines each color and each color shade (`colorValues array`).

This array of class names is passed into the `safelist`. Please note, that by implementing this feature you ship more css data to production as well as ship css classes you may never use.

    const colors = require('./node_modules/tailwindcss/colors');
    const colorSaveList = [];
    const extendedColors = {};
    const colorValues = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
    
    for (const key in colors) {
      
    
      // To avoid tailWind "Color deprecated" warning
      if (!['lightBlue', 'warmGray', 'trueGray', 'coolGray',  'blueGray'].includes(key))
      {
        extendedColors[key] = colors[key];
        for(const colorValue in colorValues) {
           colorSaveList.push(`text-${key}-${colorValue}`);
           colorSaveList.push(`bg-${key}-${colorValue}`);
        }
      }
    }
    
    
    module.exports = {
      content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}"
      ],
      safelist: colorSaveList,
      theme: {
       extend: {
          colors: extendedColors
       }
      },
      plugins: [
        require('tailwind-scrollbar'),
      ]
    
    }

If someone comes across in 2022 - I took A. Mrózek's answer and made a couple of tweaks to avoid deprecated warnings and an issue with iterating non-object pallettes.

    const tailwindColors = require("./node_modules/tailwindcss/colors")
    const colorSafeList = []
    
    // Skip these to avoid a load of deprecated warnings when tailwind starts up
    const deprecated = ["lightBlue", "warmGray", "trueGray", "coolGray", "blueGray"]
    
    for (const colorName in tailwindColors) {
      if (deprecated.includes(colorName)) {
        continue
      }
    
      const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
    
      const pallette = tailwindColors[colorName]
    
      if (typeof pallette === "object") {
        shades.forEach((shade) => {
          if (shade in pallette) {
            colorSafeList.push(`text-${colorName}-${shade}`)
            colorSafeList.push(`bg-${colorName}-${shade}`)
          }
        })
      }
    }
    
    // tailwind.config.js
    module.exports = {
      safelist: colorSafeList,
      content: ["{pages,app}/**/*.{js,ts,jsx,tsx}"],
      theme: {
        extend: {
          colors: tailwindColors,
        },
      },
      plugins: [],
    }

How to dynamically build classnames in tailwindcss

Tailwind CSS 支持使用 CSS 变量，也称作自定义属性，这使得您能够高效地在项目中使用动态样式值。Tailwind 允许在配置文件中定义这些变量，以及在实际的 CSS 中使用它们。下面是使用 Tailwind CSS 自定义属性的一些步骤和例子：

### 1. 在 Tailwind 配置文件中定义 CSS 变量

首先，您可以在 `tailwind.config.js` 文件中定义自定义属性。例如，您可以为主题颜色定义变量：

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        theme: {
          'primary': 'var(--color-primary)', // 使用 CSS 变量
        },
      },
      // 其他自定义属性，比如字体大小、间距等
    },
  },
}
```

### 2. 在 CSS 文件中设置变量的值

然后，在您的全局 CSS 文件中，您可以设置这些自定义属性的具体值：

```css
/* styles.css */
:root {
  --color-primary: #3490dc;
}

/* 或者使用响应式设计时，可以针对不同断点设置不同的值 */
@media (min-width: 768px) {
  :root {
    --color-primary: #6574cd;
  }
}
```

### 3. 在 HTML 或 JSX 中使用这些类

在定义了变量和它们的值之后，您可以在 HTML 或者其他模板语言中使用这些类：

```html

<button class="bg-theme-primary text-white">
  点击我
</button>
```

### 4. 使用 Tailwind 插件来更方便地处理变量

您也可以使用 Tailwind 插件来更轻松地处理 CSS 变量，例如 `tailwindcss-custom-properties` 插件。

### 实际例子：

假设您正在开发一个主题可切换的网站，您可以定义多组颜色变量，然后通过 JavaScript 切换根元素（`:root`）的类，来实现主题颜色的切换。

```css
/* styles.css */
:root {
  --color-primary: #3490dc;
  --color-secondary: #ffed4a;
}

.dark-mode {
  --color-primary: #4c51bf;
  --color-secondary: #f6ad55;
}
```

```javascript
// theme-switcher.js
function toggleTheme(isDark) {
  const root = document.documentElement;
  if (isDark) {
    root.classList.add('dark-mode');
  } else {
    root.classList.remove('dark-mode');
  }
}
```

使用 CSS 变量，Tailwind CSS 提供了一种强大的机制来创建具有高复用性和动态样式的用户界面，使得您可以在运行时轻松地实现复杂的设计系统。

Now Tailwind supports CSS custom properties as [arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities) since v3.0.

    :root {
      --text-color: red;
      --text-size: 5rem;
    }

    <script src="https://cdn.tailwindcss.com"></script>
    
    <span class="text-[color:var(--text-color)] text-[length:var(--text-size)] font-bold">
      Hello world!
    </span>

Run code snippetHide results

Expand snippet

Armando's answer didn't work for me but with this change it did work.

`global.css`:

no need to target a class or id. you can target the root itself using the Pseudo-Selector [https://www.w3schools.com/cssref/sel\_root.asp](https://www.w3schools.com/cssref/sel_root.asp)

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    :root {
      --primary-color: #fff;
      --secondary-color: #000;
    }
    

as for `tailwind.config.js`:

    module.exports = {
      theme: {
        extend: {
          colors: {
            "primary-color": "var(--primary-color)",
            "secondary-color": "var(--secondary-color)"
          },
        },
      },
    };

Assuming you have already added TailwindCSS to your project and that your CSS file is called `global.css`.

First, you need to edit `global.css` to look like this:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    .root,
    #root,
    #docs-root {
      --primary-color: #fff;
      --secondary-color: #000;
    }
    

And then, in order to be able to use them, you need to update `tailwind.config.js` with the new CSS variables like so:

    module.exports = {
      theme: {
        extend: {
          colors: {
            "primary-color": "var(--primary-color)",
            "secondary-color": "var(--secondary-color)"
          },
        },
      },
    };
    

You can now use these variables as desired:

    <div class="bg-primary-color">
      <h1>Hello World</h1>
    </div>

If you want your variables to work with the opacity modifier syntax, you'll need to defined them as follows:

    :root {
      --color-primary: 255 115 179;
      --color-secondary: 111 114 185;
    }
    

Then use them in your config:

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      theme: {
        colors: {
          // Using modern `rgb`
          primary: 'rgb(var(--color-primary) / <alpha-value>)',
          secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
    
          // Using modern `hsl`
          primary: 'hsl(var(--color-primary) / <alpha-value>)',
          secondary: 'hsl(var(--color-secondary) / <alpha-value>)',
        }
      }
    }
    

Basically, you'll need to convert your hex colors to rgb before you use them. Otherwise, they won't work properly. Here's the link to the documentation: [https://tailwindcss.com/docs/customizing-colors#using-css-variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables)

You can easily configure it using this plugin. (supports darkMode) [https://github.com/mertasan/tailwindcss-variables](https://github.com/mertasan/tailwindcss-variables)

    npm install -D @mertasan/tailwindcss-variables
    

### Usage:

    // tailwind.config.js
    
    module.exports = {
      theme: {
        colors: {
            red: {
                50: 'var(--colors-red-50)'
            }
        }
        variables: {
          DEFAULT: {
            sizes: {
              small: '1rem',
              button: {
                size: '2rem'
              }
            },
            colors: {
              red: {
                50: '#ff3232',
              },
            },
          },
          '.container': {
            sizes: {
              medium: '1.5rem',
            },
          },
        },
      },
      plugins: [
        require('@mertasan/tailwindcss-variables')
      ]
    }
    

**Output:**

    :root {
      --sizes-small: 1rem;
      --sizes-button-size: 2rem;
      --colors-red-50: #ff3232
    }
    
    .container {
      --sizes-medium: 1.5rem
    }

How to use css variables with tailwind css

Tailwind CSS 是一个实用工具优先的 CSS 框架，它允许你用功能类来快速构建设计。在 Tailwind 中，`not` 操作符是一个变体，通常用来表示某个样式仅在其后的类不适用时才应用。换句话说，`not` 操作符允许您创建一个反向选择器，仅在没有指定类时应用样式。

```css
/* 示例: 使用 not 操作符 */
.input:not(.disabled) {
  /* 应用样式，只要元素没有被禁用 */
}
```

在 Tailwind CSS 中，`not` 操作符通常在配置文件中的变体部分启用，以便在构建实用的类时使用。例如，如果你想对非禁用按钮应用某些样式，你需要首先在 `tailwind.config.js` 文件中启用 `not` 操作符：

```javascript
// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['not-disabled'], // 在这里启用 not-disabled 变体
    },
  },
  // ...
};
```

然后，你可以在 HTML 中使用 `not-disabled` 变体来应用样式：

```html
<button class="bg-blue-500 text-white not-disabled:bg-green-500">Button</button>
```

在这个例子中，`not-disabled:bg-green-500` 这个类将应用绿色背景，但仅当按钮没有被禁用时。如果按钮上有 `disabled` 类，则不会应用绿色背景，因为 `not-disabled` 变体表明这个样式应该在没有 `disabled` 类的情况下应用。

The answer is in the link to [`last` in the docs](https://tailwindcss.com/docs/pseudo-class-variants#last-child-v1-1-0), that you shared.

Just add `last:border-b-0` to all list items, and it will remove the `border-bottom` if it is the `last-child`.

    <ul>
      <li
        v-for="(item, index) in items"
        :key="`item-${index}`"
        class="border-solid border-b border-black last:border-b-0"
      >
        Item
      </li>
    </ul>

You can use [Tailwind arbitrary variants](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-variants):

    <li class="[&:not(:last-child)]:border border-sky-500">Item</li>
    

This is available since [Tailwind v3](https://tailwindcss.com/blog/tailwindcss-v3).

We could also do this by selecting the index number we want to edit

EXAMPLE: I will change the first one, and all the following should have a style

    <div
        v-for="(item, i) in items"
        :key="i"
        :class="{ 'mx-0': i === 0, 'mx-4': i > 0 }"
    >
    </div>
    

so the FIRST element has an index from 0, and therefore we will have a margin x 0,

and all of the following would have margin x 4.

How to use not in tailwind css

在TailwindCSS中，`fixed`和`sticky`是用来设置元素定位的实用类。下面我会分别解释它们的用法，并给出一些例子。

### Fixed 定位

`fixed` 属性在 TailwindCSS 中对应的类是 `fixed`，它会将元素的定位设置为固定（fixed），意味着元素会相对于浏览器窗口进行定位，并且即使页面滚动，元素也会停留在设置的位置上。

**例子**：

假设我们想要创建一个固定在视口顶部的导航栏：

```html
<div class="fixed top-0 left-0 right-0">
  
</div>
```

上面的代码将导航栏固定在页面的顶部。`top-0`，`left-0`，和 `right-0` 是 TailwindCSS 中的辅助类，它们分别将导航栏的顶部、左边和右边定位到视口的边缘。

### Sticky 定位

`sticky` 定位是一种混合模式，它可以被看作是 `relative` 和 `fixed` 定位的结合。元素在页面滚动到某个阈值之前会表现得像是 `relative` 定位，滚动到这个阈值之后，元素就会固定在设定的位置。

在 TailwindCSS 中，`sticky` 对应的类就是 `sticky`，通常还需要配合 `top`, `bottom`, `left` 或者 `right` 使用，以确定元素变为 `fixed` 时的具体位置。

**例子**：

如果我们想要创建一个当用户向下滚动页面时，会固定在距离视口顶部20像素的位置的侧边栏：

```html
<div class="sticky top-20">
  
</div>
```

在这个例子中，`top-20` 是一个辅助类，用来设置滚动到离视口顶部20像素时元素变为 `fixed` 的位置。元素默认是 `relative` 定位，当页面滚动到元素的顶部边缘接近视口顶部20像素时，元素就会固定在那里。

总的来说，`fixed` 和 `sticky` 定位是两种常用的CSS定位方法，它们在TailwindCSS中通过相应的实用类很容易实现。使用这些类可以帮助我们快速构建具有固定或粘性定位的用户界面元素。

<div class="flex flex-col h-screen justify-between">
      <header class="h-10 bg-red-500">Header</header>
      <main class="mb-auto h-10 bg-green-500">Content</main>
      <footer class="h-10 bg-blue-500">Footer</footer>
    </div>
    

Class `justify-between` is not required, but I would leave him (for other case).

So, play with `h-screen` and `mb-auto` classes.

And you get this UI:

[![enter image description here](https://i.stack.imgur.com/UvzrW.png)](https://i.stack.imgur.com/UvzrW.png)

Another approach would be using **flex-grow**.

    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
    
    <div class="flex flex-col h-screen">
        <div class="bg-red-500">header</div>
        <div class="bg-green-500 flex-grow">content</div>
        <div class="bg-blue-500">footer</div>
    </div>

Run code snippetHide results

Expand snippet

New solution in 2022. Tailwindcss version 3.0.24 in codepen demo.

    <div class="min-h-screen">
      <div>Content</div>
      <div class="sticky top-[100vh]">Footer</div>
    </div>
    
    

[codepen demo](https://codepen.io/shrekuu/pen/zYRovQa)

use 'fixed' instead of 'static'

`class="fixed bottom-0"`

Another way that was recently discovered by [Sílvio Rosa](https://www.twitter.com/silvior_) uses `position: sticky` + `top: 100vh` on the footer. The way to achieve this with **TailWindCSS** is...

    <html class="min-h-screen">
      <body class="min-h-screen">
        
        <header>Header</header>
        <main>Content</main>
        <footer class="sticky top-[100vh]">footer</footer>
    
      </body>
    </html>
    

You can read the full article on CSS Tricks [here](https://css-tricks.com/a-clever-sticky-footer-technique/)

How to use fixed sticky in tailwindcss

要使用 TailwindCSS 将 `div` 在屏幕中垂直居中对齐，我们可以利用 Tailwind 提供的 Flexbox 或者 Grid 布局工具类。下面将分别介绍两种方法实现垂直居中对齐。

### 使用 Flexbox

1. 首先，我们需要为父容器添加 `flex` 类来启用 Flexbox 布局。
2. 然后，使用 `items-center` 类可以使子元素在垂直方向上居中。
3. 使用 `justify-center` 类可以使子元素在水平方向上居中。
4. 为了使 Flexbox 布局占满整个屏幕的高度，我们需要添加 `h-screen` 类，这将设置父容器的高度为视口高度。

下面是一个示例代码：

```html

<div class="flex items-center justify-center h-screen">
  
  <div class="bg-blue-500 text-white p-8">
    居中的内容
  </div>
</div>
```

### 使用 Grid

1. 为父容器添加 `grid` 类启用 Grid 布局。
2. 使用 `place-items-center` 类可以同时在垂直和水平方向上居中子元素。
3. 同样，使用 `h-screen` 类设置父容器高度为视口高度。

示例代码如下：

```html

<div class="grid place-items-center h-screen">
  
  <div class="bg-red-500 text-white p-8">
    居中的内容
  </div>
</div>
```

以上两种方法都能够实现在屏幕中垂直和水平居中对齐 `div`。在选择哪种方法实现时，可以根据你的具体布局需求和对Flexbox或Grid布局的熟悉程度做出决定。

可以这么设置 

```
<div class="flex h-screen">
  <div class="m-auto">
    <h3>title</h3>
    <button>button</button>
  </div>
</div>
```

Partly referencing [@mythicalcoder 's solution](https://stackoverflow.com/a/59807846/4957466) but using only the necessary classes provided by TailwindCss (Version 1.8.+):

*   `flex` : To use a flex-div as container
*   `h-screen` : To size the container-height to the viewport height.
*   `justify-center` : To justify center (horizontal center) - _main axis_ - [Doc](https://tailwindcss.com/docs/justify-content)
*   `items-center` : To align the items to center (horizontal center) - _cross axis_ - [Doc](https://tailwindcss.com/docs/align-items)

My Solution to center two text lines:

    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
    
      <div class="flex h-screen justify-center items-center">
        <div class="text-center bg-blue-400"> 
            <h1 class="text-3xl">HEADING</h1>
            <p class="text-xl">Sub text</p>
        </div>
      </div>

Run code snippetHide results

Expand snippet

Justify-Center and Items-Center
-------------------------------

While Anders' answer solves the problem for this particular case, I think it's important to note that using `justify-center` and `items-center` is circumstantial.

Let's have a look at one of the examples from the [tailwind documentation](https://tailwindcss.com/docs/flexbox-justify-content/#center).

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
    
    <div class="flex justify-center bg-gray-100">
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
    </div>

Run code snippetHide results

Expand snippet

As we can see the above code centers the elements horizontally. The reason for this is because the justify-center class **centers the element on the flex container's main axis**.

This means that if we were to change the main axis to 'column' then we would get a different result.

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
    
    <div class="flex flex-col justify-center bg-gray-100">
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
    </div>

Run code snippetHide results

Expand snippet

Justify-Center and Items-Center centers the elements on the main axis and the cross axis, and they can be used in place of each other. They are the opposites of each other and will produce different results depending on what the current main axis is.

I have tried to summarize different occurrences of centering the `divs`

### Center divs in Column

##### For fit width

      <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
        <div className="bg-green-500 p-2">item 1</div>
        <div className="bg-pink-500 p-2">item 2</div>
      </div>
    

[![enter image description here](https://i.stack.imgur.com/2sz5T.png)](https://i.stack.imgur.com/2sz5T.png)

##### For full width

      <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
        <div className="bg-green-500 p-2 w-full flex justify-center">
          item 1
        </div>
        <div className="bg-pink-500 p-2 w-full text-center">item 2</div>
      </div>
    

[![enter image description here](https://i.stack.imgur.com/BBtc4.png)](https://i.stack.imgur.com/BBtc4.png)

* * *

### Extra:

##### Center vertically split divs

    <div class="flex h-screen flex-col">
      <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
        <div class="bg-yellow-400 p-6">Item 1</div>
      </div>
      <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
    </div>
    
    

[![enter image description here](https://i.stack.imgur.com/dgRgs.png)](https://i.stack.imgur.com/dgRgs.png)

##### Center horizontally split divs

    <div class="flex h-screen">
      <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
        <div class="bg-yellow-400 p-6">Item 1</div>
      </div>
      <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
    </div>
    
    

[![enter image description here](https://i.stack.imgur.com/mrCFa.png)](https://i.stack.imgur.com/mrCFa.png)

### Center divs in Row

#### For fit height

    <div>
      <div class="flex h-screen items-center justify-center bg-yellow-400">
        <div class="flex justify-center bg-green-500 p-2">item 1</div>
        <div class="bg-pink-500 p-2 text-center">item 2</div>
      </div>
    </div>
    

[![enter image description here](https://i.stack.imgur.com/tZ3lV.png)](https://i.stack.imgur.com/tZ3lV.png)

#### For full height

    <div>
      <div class="flex h-screen items-center justify-center bg-yellow-400">
        <div class="flex h-full items-center bg-green-500 p-2">item 1</div>
        <div class="flex h-full items-center bg-pink-500 p-2">item 2</div>
      </div>
    </div>
    
    

[![enter image description here](https://i.stack.imgur.com/UCXTh.png)](https://i.stack.imgur.com/UCXTh.png)

According to the question, the "Items1", "Items2" should be both horizontally and vertically aligned.

**Horizontal** => text-center/justify-center

**Vertical** => items-center

Here is a sample code for producing a view similar to the ASCII image in the question.

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
    
    <div class="relative h-32 bg-blue-400">
      <div class="absolute inset-0 flex items-center justify-center">
        Item 1
        <br>
        Item 2
      </div> 
    </div>

Run code snippetHide results

Expand snippet

How to vertical align div across full screen with tailwind css?

在使用 Tailwind CSS 时，如果您想访问 `div` 的所有子元素并对它们应用样式，您通常会通过在父级 `div` 上使用 Tailwind 的 `@apply` 指令或直接在子元素的类中包含所需的 Tailwind 类。但是，Tailwind 默认并没有提供直接针对所有子元素的工具类。

虽然没有直接的工具类，但您可以通过写自定义的 CSS 结合 Tailwind 的工具类，来实现对所有子元素的控制。这通常是在您的项目的CSS文件中通过使用标准的CSS选择器来完成的。

以下是如何在自定义CSS中使用Tailwind类来访问和样式化`div`的所有子元素的示例：

```css
/* 在您的项目的 CSS 文件中 */
.parent > * {
  @apply text-base p-4 border border-gray-300;
}
```

在这个例子中，`.parent > *` 选择器选中了类名为 `parent` 的 `div` 的直接子元素，并且应用了基本的文本大小 (`text-base`)、内填充 (`p-4`) 和边框样式 (`border border-gray-300`)。这样，所有直接子元素都会有统一的样式。

另外，如果您正在使用 Tailwind CSS v2.1 或更高的版本，并且启用了 JIT 模式，您可以使用 `@variants` 指令来生成响应不同状态变化的工具类。例如：

```css
@variants responsive, hover, focus {
  .parent > * {
    @apply text-base p-4 border border-gray-300;
  }
}
```

在这个例子中，我们生成了样式在不同屏幕尺寸（响应式设计）、悬停和聚焦时的变种。

请注意，直接在HTML上大量地定制化样式可能违背了 Tailwind CSS 的实用主义原则，因此建议仅在确实需要时这样做，并且要注意维护性和性能。在可能的情况下，最好是为子元素添加特定的类以利用 Tailwind 的实用类。

In tailwind 3.1, you can use arbitrary values to target child elements.

    <div class="[&>*]:p-4">...</div>
    <div class="[&>p]:mt-0 ">...</div>
    

[https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants](https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants)

As mentioned by @kca in the comments, space in the selectors need to be replaced by an underscore character in Tailwind classes. For example if you want to select all descendants, not just the direct children then you can use this:

    <div class="[&_*]:p-4">...</div>
    <div class="[&_p]:mt-0 ">...</div>

There are three options these days.

Option 1 - Plugins
------------------

You could use these simple lines in `tailwind.config.js` to give you `child` and `child-hover` options.

    plugins: [
        function ({ addVariant }) {
            addVariant('child', '& > *');
            addVariant('child-hover', '& > *:hover');
        }
    ],
    

Then use like this

    <div class="child:text-gray-200 child-hover:text-blue-500">...</div>
    

Which will give every child a gray textcolor, and a blue one on hover.

See [here](https://tailwindcss.com/docs/plugins#adding-variants) for more information on adding variants using a plugin

Option 2 - Ad-hoc selectors
---------------------------

Since 4th of july 2022, Tailwind added an ad-hoc approach to target specific elements. You can now use the below without any need for plugins.

    <div class="[&>*]:text-gray-200 [&>*:hover]:text-blue-500">...</div>
    

See the answer of @phum for more info!

Option 3 - Native child selectors
---------------------------------

Since 19th of december 2023, Tailwind added child selectors! You can now use the below.

    <div class="*:text-gray-200 hover:*:text-blue-500">...</div>
    

See [here](https://tailwindcss.com/blog/tailwindcss-v3-4) for the release notes.

If you want to access the direct children of div with selector, please use `@layer` directive. see below:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    @layer base {
      div.section > div {
        @apply text-xl;
      }
    }
    

[https://tailwindcss.com/docs/adding-base-styles](https://tailwindcss.com/docs/adding-base-styles)

This is currently not possible and probably won't be implemented soon.

Instead, I recommend using this plugin: [https://github.com/benface/tailwindcss-children](https://github.com/benface/tailwindcss-children). Follow the README for further instructions.

### Usage:

After you have installed the plugin and added it to your `tailwind.config.js`, you can access direct children by adding `children:{your_style}` to the parent class. If you for example would want to add `p-4` to `header` and `content`, your code would look like this:

    <div class="section children:p-4">
       <div class="header">header</div>
       <div class="content">
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
       </div>
    </div>

This is tailwind v1&v2 version of Willem Mulder's.

only change is variant name `children` instead of `child`

     plugin(function({ addVariant, e }) {
    
      addVariant('children', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          const newClass = e(`children${separator}${className}`);
          return [
            `.${newClass} > *`,
            // `.${newClass}:hover `,
          ].join(",");
        });
      });
    
      addVariant('children-first', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          const newClass = e(`children-first${separator}${className}`);
          return [
            `.${newClass} > *:first-child`,
          ].join(",");
        });
      });
    
    }),
    

add variants for padding

    variants: {
        padding: ['responsive', 'children', 'children-hover', 'children-first', ],
       
      },

How to access all the direct children of a div in tailwindcss

在 Tailwind CSS 中，可以通过几种方式使用 CSS 的 `calc()` 函数来创建动态的属性值。这包括内联样式、自定义 CSS 类和使用 Tailwind 的 Arbitrary Values 功能。以下是如何在 Tailwind CSS 中使用 `calc()` 函数的详细指导：

### 结合 Tailwind CSS 配置 

在 Tailwind CSS 的配置文件中添加自定义宽度：

```javascript
// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      width: {
        'calc-example': 'calc(100% - 2rem)',
      },
    },
  },
  // ...
};
```

然后在 HTML 中使用这个新的配置类： 

```html
<div class="w-calc-example ...">
  
</div>
```

### 使用 Tailwind 的 Arbitrary Values

Tailwind 支持在类名中使用方括号 `[]` 来内联写入任意值（包括 `calc()` 函数）：

```html
<div class="w-[calc(100%_-_2rem)] ...">
  
</div>
```

注意，在 `calc()` 内部的空格需要使用下划线 `_` 来表示，这是因为在 Tailwind CSS 中使用 Arbitrary Values 时，如果值包含空格或其他特殊字符，则必须适当转义它们。

以上就是在 Tailwind CSS 中使用 `calc()` 函数的几种方法。使用 `calc()` 时，请确保在操作符号前后留有空格，以避免解析错误。

不要在calc中加空格

```
class="w-[calc(100%+2rem)]"
```

输出内容:

```
.w-\[calc$100\%\+2rem$\] {
  width: calc(100% + 2rem);
}
```

或者可以使用下划线代替空白

```
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-20 w-[calc(100%_-_10rem)] bg-yellow-200"></div>
```

我们也可以使用主题变量

```
h-[calc(100%-theme(space.24))]
```

### [theme()](https://tailwindcss.com/docs/functions-and-directives#theme)

使用theme()函数使用点表示法访问Tailwind配置值。

当您希望仅为声明的一部分引用主题配置中的值时，这可能是@apply的有用替代方案

```
.content-container {
  height: calc(100vh - theme('spacing.7'));
}
```

How to use calc in tailwind css

在使用Tailwind CSS时，通常不需要在CSS检查器（如浏览器开发者工具中的样式编辑器）中直接添加自定义规则，因为Tailwind是一个工具类优先的框架，您可以通过在HTML标签中直接添加类名来应用样式。然而，如果您需要在项目中使用Tailwind CSS以外的自定义CSS样式或者需要对现有的Tailwind样式进行调整，通常有几种方法可以做到这一点：

1. **使用Tailwind CSS的配置文件**：这是扩展或自定义Tailwind样式的首选方法。在`tailwind.config.js`文件中，您可以扩展现有的样式或添加新的自定义样式。例如，如果您想要添加一个新的间距规则，可以在配置文件中这样做：

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  }
}
```

这将添加新的间距类，例如`mt-72`, `mt-84`, 和 `mt-96`，可在项目中直接使用。

2. **使用@apply指令**：在您的CSS文件中，您可以使用Tailwind提供的`@apply`指令来应用工具类的样式到自定义的CSS类中。这允许您将Tailwind的实用程序类应用到CSS中，然后在HTML中使用这个自定义类。例如：

```css
/* custom.css */
.btn-custom {
  @apply text-white bg-blue-500 hover:bg-blue-700;
}
```

然后，在HTML中，您可以使用`<button class="btn-custom">Click me</button>`来应用这些样式。

3. **直接在CSS中编写**：如果你更愿意直接操作CSS或需要添加一些Tailwind没有覆盖的复杂样式，你可以在CSS文件中直接添加它们。例如：

```css
/* custom.css */
.custom-rule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
```

然后在HTML中用`class="custom-rule"`来使用这个规则。

4. **浏览器的CSS检查器**：如果您只是想在开发过程中暂时测试一些样式更改，可以使用浏览器的CSS检查器。右键单击您想要调整的元素，选择“检查”(Inspect)，然后在元素的样式面板中添加或修改样式。但是，这种方法的变化只存在于您当前的浏览器会话中，刷新页面后更改会丢失，因此，最终您还是需要将更改反映到您的源代码中。

尽管如此，最佳实践是尽量利用Tailwind CSS的配置和类系统来管理您的样式，因为这有助于保持项目的一致性和可维护性。直接在开发者工具中添加或调整样式通常是用于快速调试或实验的临时手段，并不适合长期的代码维护。

If you use Visual Studio Code, you can use the [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss) plugin.

Make sure you associate your `scss` files with PostCSS by adding the following to your `settings.json` file: `"files.associations": { "*.scss": "postcss" }`.

2022-05 Update
==============

The official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension now extends the built-in CSS language mode to fix these lint warnings, without losing any of VS Code’s default IntelliSense features.

Review the [Recommended VS Code Settings](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss#recommended-vs-code-settings) section to enable this for all CSS files in your workspace.

I leave my original answer intact below if you don’t want to install an additional extension, but since v0.8.0 it no longer conflicts with the built-in CSS support so that would be my recommended approach.

* * *

Old Answer Without Extension
============================

Visual Studio Code allows you to define [Custom Data for CSS Language Service](https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md).

For example, in your workspace’s `.vscode/settings.json` you can add:

    {
      "css.customData": [".vscode/css_custom_data.json"]
    }
    

And then in `.vscode/css_custom_data.json` add:

    {
      "atDirectives": [
        {
          "name": "@tailwind",
          "description": "Use the @tailwind directive to insert Tailwind’s `base`, `components`, `utilities`, and `screens` styles into your CSS.",
          "references": [
            {
              "name": "Tailwind’s “Functions & Directives” documentation",
              "url": "https://tailwindcss.com/docs/functions-and-directives/#tailwind"
            }
          ]
        }
      ]
    }
    

Note that you may have to reload the VS Code window for the change to be picked up.

Here is a copy of `.vscode/css_custom_data.json`, which contains all directives with short usage snippets (which in turn get syntax highlighted in vs code):

    {
      "version": 1.1,
      "atDirectives": [
        {
          "name": "@tailwind",
          "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
          "references": [
            {
              "name": "Tailwind Documentation",
              "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
            }
          ]
        },
        {
          "name": "@responsive",
          "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
          "references": [
            {
              "name": "Tailwind Documentation",
              "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
            }
          ]
        },
        {
          "name": "@screen",
          "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
          "references": [
            {
              "name": "Tailwind Documentation",
              "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
            }
          ]
        },
        {
          "name": "@variants",
          "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
          "references": [
            {
              "name": "Tailwind Documentation",
              "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
            }
          ]
        }
      ]
    }
    

Here's a preview of the result:

[![preview of @screen directive](https://i.stack.imgur.com/t37TS.png)](https://i.stack.imgur.com/t37TS.png)

The only directive missing is `@apply`, because it's declared at the CSS property level. The _CSS Language Service_ probably doesn't expect `atRules` at the property level and won't pick up such directives.

This is the at-rule-no-unknown rule provided by Visual Studio Code's built-in list.

In order to get rid of it you need to do the following:

**1**. Install the Stylelint extension `code --install-extension stylelint.vscode-stylelint`

**2**. Install the Stylelint recommended configuration `npm install stylelint-config-recommended --save-dev`

**3**. Add these two lines in your Visual Studio Code USER SETTINGS

    "css.validate": false, // Disable default CSS built-in lint
    "stylelint.enable": true, // Enable Stylelint
    "scss.validate": false, // Disable SCSS lint (optional if using scss)
    

**4**. Paste these lines into a file called `.stylelintrc` in your project's root directory; create it if it does not exist. More information about Stylelint's configuration follow this link: [https://stylelint.io/user-guide/](https://stylelint.io/user-guide/)

    {
      "extends": "stylelint-config-recommended",
      "rules": {
        "at-rule-no-unknown": [ true, {
          "ignoreAtRules": [
            "extends",
            "tailwind"
          ]
        }],
        "block-no-empty": null,
        "unit-allowed-list": ["em", "rem", "s"]
      }
    }

### Currently Recommended Visual Studio Code Settings (Updated 2022-12-15)

**Official Tailwind CSS IntelliSense Visual Studio Code Documentation**

Use the _files.associations_ setting to tell Visual Studio Code to always open .css files in Tailwind CSS mode:

        "files.associations": {
          "*.css": "tailwindcss"
        }
    

Tip: Press Ctrl + , from Visual Studio Code to open Settings; then, type _"Files Associations"_.

By default Visual Studio Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the _editor.quickSuggestions_ setting may improve your experience:

        "editor.quickSuggestions": {
          "strings": true
        }
    

Combining both, your _[settings.json](https://stackoverflow.com/questions/65908987/how-can-i-open-visual-studio-codes-settings-json-file)_ file (if new) will look similar to this:

        {
            "files.associations": {
              "*.css": "tailwindcss"
            },
            "editor.quickSuggestions": {
                "strings": true
            }
        }
    

Source: _[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)_

* * *

### Previously Recommended Visual Studio Code Settings (Deprecated)

Visual Studio Code has built-in CSS validation which may display errors when using Tailwind CSS-specific syntax, such as @apply. You can disable this with the _css.validate_ setting:

    "css.validate": false
    

The "editor.quickSuggestions" setting recommendation remains the same then and now. Combining both, your _settings.json_ file (if new) would look similar to this:

    {
        "css.validate": false,
        "editor.quickSuggestions": {
            "strings": true
          }
    }

**1.** Just go to settings (Ctrl + , for a shortcut).

**2.** Search for CSS in the search bar.

**3.** look for the _"CSS > Lint: Unknown At Rules"_

**4.** Select "ignore" from the dropdown options.

This ignores the warning. If you're OK with it.

Tailwind CSS相关问题