Create classes which extend Tailwind css classes

Question

I use Tailwind for my project and I would like to create classes which use tailwind existing classes. For example, my buttons currently look like this:

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

As you can see I use a lot of classes and I would like to have instead something like this:

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

with

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

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

but when I try to do this I have the following error:

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

Is there a way to achieve what I'm trying to do? Thanks

Chara

Have you tried @apply? tailwindcss.com/docs/functions-and-directives#apply – Cheston

Answer 1

You can just do this:

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

Overwork

Answer 2

I found the solution: You need to install postcss-import with npm install postcss-import, tweek the postcss.config.js with:

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

and then you can create classes based on the lib classes with:

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

Chara

I think it's a lot cleaner to use a single @apply and list each prop on its own line, ie: ``` @apply relative max-w-3xl mx-auto; ``` – Gropius

Answer 3

if you use laravel mix

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

You need to configure your webpack.mix.js in one of the following ways

1] you can either use postCss like this

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

2] or, you can use sass like this

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

Spritsail

Answer 4

Example:

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

No CSS preprocessor needed

Expropriate

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Wispy

Answer 5

you must go to the file that included @component @utilities and @base then type:

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

Fetus

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Boil

Answer 6

Yes, you can extend your own tailwind classes without a plugin. Just define your base class inside components layer of tailwind and use it in another class that defined in the same place. Here is how I use it in my main css file:

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

and can be used in your component:

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

Charmeuse