创建扩展 Tailwind css 类的类

Question

我在我的项目中使用 Tailwind，并且我想创建使用 Tailwind 现有类的类。例如，我的按钮当前如下所示：

<button class="text-light-blue bg-white rounded-full border-solid border-2 border-light-blue py-1 px-4 box-border shadow hover:bg-blue-700 hover:text-white hover:border-blue-700">
       Button
</button>

如您所见，我使用了很多类，而我希望使用类似这样的东西：

<button class="app-btn"> Button </button>

与

@import '/node_modules/tailwindcss/utilities.css';

.app-btn { 
   @extend .text-light-blue;
   @extend .bg-white;
   ...
}

但是当我尝试这样做时，出现以下错误：

SassError: ".app-btn" failed to @extend ".bg-white".
       The selector ".bg-white" was not found.
       Use "@extend .bg-white !optional" if the extend should be able to fail.
        on line 4 of src/assets/styles/app-shared-style.scss

有没有办法实现我想要做的事情？ 谢谢

Answer 1

如果你使用laravel mix

const mix = require('laravel-mix');

您需要通过以下方式之一配置您的webpack.mix.js

1] 你可以像这样使用postCss

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

2] 或者，您可以像这样使用sass

mix.sass("resources/css/app.scss", "public/css").options({
    postCss: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ], });

Answer 2

你可以这样做：

.app-btn {
@apply text-white rounded-full py-1 px-4 shadow hover:bg-blue-700.
}

Answer 3

我找到了解决方案： 您需要安装postcss-import 和npm install postcss-import，使用以下命令修改postcss.config.js：

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

然后您可以使用以下命令创建基于 lib 类的类：

@import 'tailwindcss/utilities';
@import 'tailwindcss/base';
@import 'tailwindcss/components';

.app-btn {      
  @apply text-white;
  @apply rounded-full;
  @apply py-1;
  @apply px-4;
  @apply shadow;
  &:hover {
    @apply bg-blue-700;
  }
}