Tailwindcss: [ Problem ] Compiling Stylus with Laravel Mix

[olavoasantos]

Hey everybody. How are you?

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

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?

[adamwathan]

Hmm this is a bummer, it seems like Stylus doesn't recognize the @apply at-rule and compiles things all screwed up as a result.

Exploring work-arounds for this but haven't come up with anything yet.

[adamwathan]

I've raised an issue on the Stylus repo, can follow it there:

https://github.com/stylus/stylus/issues/2335

[olavoasantos]

Thanks for the quick reply, @adamwathan!

I got it working by running Tailwind first and running Stylus later. Not a good solution, but if someone absolutely needs to use Stylus, this should work.

// resources/assets/stylus/app.styl

@tailwind preflight;
@tailwind utilities;

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

    &:hover {
        @apply .bg-black;
    }
}

And your webpack.mix.js:

// webpack.mix.js

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

Run npm run dev once and you'll get an error (from the .stylus(...)). From the postCss bit, you'll get an ./resources/assets/tailwind/app.styl:

    // ./resources/assets/tailwind/app.styl

    // ...Around line 3639
  .card {
    & {
      max-width: 30rem;
      border-radius: .25rem;
      overflow: hidden;
      -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
              box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
    }

    &:hover {
      background-color: #222b2f;
    }
  }

  // ...Rest of the file

Run npm run dev again, and you'll get an public/css/app.css:

    /* ./public/css/app.css */
    /* ...Around line 3540 */

  .card {
    max-width: 30rem;
    border-radius: 0.25rem;
    overflow: hidden;
    -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
  }

  .card:hover {
    background-color: #222b2f;
  }

  /* ...Rest of the file */

[olimorris]

I found this last week. The simple solution is to use Stylus's @CSS literals. I posted an example in the discussion forum.

[adamwathan]

Sweet, going to close this then. For anyone wondering, here's an example of the fix:

@css {
    .error {
        @apply .text-red;
    }
}

If you're declaring properties in addition to using @apply, you need to duplicate the selector and split the @apply section and custom properties section into separate declarations:

.error {
    font-weight: bold;
}
@css {
    .error {
        @apply .text-red;
    }
}