Laravel Mix + Stylus + TailwindCss

Hey everybody. How are you?

I'm getting some weird behavior when I try to compile Stylus stylesheet using Laravel Mix and Tailwind Css.

My input file is:

      // resources/assets/stylus/app.styl

      @tailwind preflight;
      @tailwind utilities;

      .card {
          @apply .max-w-sm .rounded .overflow-hidden .shadow-lg;
      }

As instructed on the docs, my Mix config file is set to:

      // webpack.mix.js

      mix.stylus('resources/assets/stylus/app.styl', 'public/css')
            .options({
               postCss: [ tailwindcss('./tailwind.config.js') ],
            });

And the output file is:

    // public/css/app.css

    // ... Around line 3639

    @apply .max-w-sm .rounded .overflow-hidden .shadow-lg;

    // ... Rest of the file

This works perfectly on SASS. Any ideas on how to fix this?

reinink

8 years ago

Level 3

This is a known issue with Stylus and Tailwind.

Here's an example of the fix:

@css {
    .card {
        @apply .max-w-sm .rounded .overflow-hidden .shadow-lg;
    }
}

1 like

Please or to participate in this conversation.