如何在CodePen中使用Tailwind CSS的@apply及相关特性？

• 第一步：切换CSS预处理器为PostCSS
  打开CodePen的「Settings」→「CSS」面板，在「Preprocessor」下拉菜单选择PostCSS——因为@apply是Tailwind PostCSS插件提供的特性，用PostCSS能直接对接Tailwind的编译逻辑。

• 第二步：添加Tailwind相关PostCSS插件
  在CSS设置的「PostCSS Plugins」区域，点击「Add Plugin」，分别添加tailwindcss和autoprefixer两个插件，确保Tailwind的编译和浏览器前缀自动补全功能正常工作。

• 第三步：引入Tailwind核心指令
  在你的CSS代码最顶部添加以下指令，让Tailwind加载基础样式、组件样式和工具类：

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

• 第四步：使用@apply自定义组件
  现在就可以像你写的那样定义组件了，比如：

.button {
  @apply rounded-4 border-2 border-blue-500 px-4 py-2;
}

注意：默认Tailwind没有rounded-4这个工具类，需要自定义配置。在CodePen的JS面板中添加Tailwind配置扩展这个类：

tailwind.config = {
  theme: {
    extend: {
      borderRadius: {
        '4': '4px', // 可根据需求调整数值，比如'0.25rem'
      },
    },
  }
}

之前尝试后没生效，大概率是没配置Tailwind插件或未引入核心指令，按以上步骤配置后就能正常使用@apply扩展组件了。

内容的提问来源于stack exchange，提问作者Paillat