解决在 Tailwind CSS 中使用 @apply 宏无法编译的问题

在使用 Tailwind CSS 进行前端开发的过程中，@apply 宏是非常实用的一个功能。通过 @apply 宏，我们可以将一系列的类名组合成为一个新的类，方便地进行样式复用。但是有时候，@apply 宏在编译时会出现问题，导致样式无法正常加载。本文将介绍一些解决 @apply 宏无法编译的问题的方法。

问题描述

当我们在 Tailwind CSS 中使用 @apply 宏时，有时候会遇到以下问题：

// www.javascriptcn.com code example
/* 定义一个组合的新类 */
@layer components {
  .new-class {
    @apply bg-blue-500 text-white;
  }
}

/* 在页面中使用该类 */
<div class="new-class">我的新样式</div>

在编译时，会出现以下错误：

// www.javascriptcn.com code example
Error: <css input>:626:8: Unknown word
    at /path/to/project/node_modules/postcss-safe-parser/lib/index.js:77:19
    at parse (/path/to/project/node_modules/postcss/lib/parse.js:17:19)
    at /path/to/project/node_modules/postcss/lib/root.js:104:20
    at Root.append (/path/to/project/node_modules/postcss/lib/root.js:57:14)
    at Root.append (/path/to/project/node_modules/postcss/lib/container.js:33:14)
    at CssSyntaxError.call (/path/to/project/node_modules/postcss/lib/declaration.js:256:16)
    at CSSAssembler.compile (/path/to/project/node_modules/postcss/lib/css-syntax-error.js:21:28)
    at CSSAssembler.stringify (/path/to/project/node_modules/postcss/lib/css-syntax-error.js:30:16)
    at LazyResult.stringify (/path/to/project/node_modules/postcss/lib/lazy-result.js:71:46)
    at console.error (/path/to/project/node_modules/postcss-cli/bin/postcss:160:27)

解决方法

问题的发生原因是 Tailwind CSS 要求必须按照特定的规则命名自定义的类，否则就会出现编译错误。具体来说，自定义的类名应该由两个部分组成，用连字符（-）连接，第一个部分表示颜色或大小，第二个部分表示组件或元素。例如，想要定义一个背景色为紫色的按钮，应该这样定义：

.btn-purple {
  @apply bg-purple-500 text-white;
}

在页面中使用该类：

<button class="btn-purple">我的紫色按钮</button>

这样就可以正确编译了。

深入探讨

那么为什么 Tailwind CSS 的类名要遵循这样的命名规则呢？这是因为 Tailwind CSS 的设计初衷就是为了提高前端开发的效率。通过按照一定的规则定义类名，我们可以快速地识别样式的作用和含义。同时，这种命名方式也有利于样式复用。当我们在多个组件中使用相同的颜色或大小时，可以直接复用相同的类名，从而避免重复编写样式。

但是，这种命名方式并不适用于所有的场景。在某些情况下，我们可能需要自定义更加灵活的类名，以满足特定的需求。这时候可以使用第三方插件 tailwindcss-custom-props，通过变量的方式自定义类名。

例如，我们可以定义一个变量 $modal-bg 来表示弹窗的背景颜色：

// www.javascriptcn.com code example
@tailwind base;

@tailwind components;

@layer components {
  .modal {
    --modal-bg: #f0f0f0;
    background-color: var(--modal-bg);
    @apply w-1/2 p-4 rounded-lg shadow-lg text-center;
  }
}

@tailwind utilities;

在页面中使用该类：

<div class="modal">弹窗内容</div>

这样就可以定义自己的规则，而不受默认规则的限制了。

小结

本文介绍了在 Tailwind CSS 中使用 @apply 宏无法编译的问题以及解决方法。我们发现，这个问题的本质原因是因为 Tailwind CSS 要求必须按照特定的规则命名自定义的类。在实际开发中，我们应该遵循这个规则，以提高样式复用的效率。如果需要定义更加灵活的类名，可以使用第三方插件 tailwindcss-custom-props。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d78021a941bf7134d7216f