创建扩展 Tailwind css 类的类

Answer 1

你可以这样做：

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

Answer 2

我找到了解决方案： 您需要使用

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;
  }
}

Answer 3

如果您使用

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 4

示例：

    .input {
        @apply p-2 text-center mb-2 border rounded focus:outline outline-2 focus:outline-blue-500;
    }

    .file-input {
      @apply input border-none text-slate-500 leading-10 file:block md:file:inline-block file:w-full md:file:w-auto file:btn file:h-min file:border-none file:cursor-pointer file:mx-3;
    }

无需 CSS 预处理器

Answer 5

您必须转到包含 @component @utilities 和 @base 的文件，然后输入：

@layer component{
   .class-name{
      @apply your classes
   }
}

Answer 6

是的，您可以扩展自己的 tailwind 类，而无需插件。只需在 tailwind 的

components

层中定义您的基类，然后在同一位置定义的另一个类中使用它即可。以下是我在主 css 文件中使用它的方法：

@layer components {
  /* my base class "button" */
  .button {
    @apply rounded p-1 bg-gray-200 text-black;
  }

  /* here, extending it with "button-red" */
  .button-red {
    @apply button text-red-500;
  }
}

并且可以在您的组件中使用：

<button class="button-red"> Button </button>