Sage10: Tailwind ordering incorrect for @layer at rule in app.scss

[SergiArias]

• [x] I've read the guidelines for Contributing to Roots Projects
• [x] This request isn't a duplicate of an existing issue
• [x] I've read the docs and followed them (if applicable)
• [x] This is not a personal support request that should be posted on the Roots Discourse community

Description / how to reproduce

I always use the @layer base, components and utilities at rules unless I need to override something, which almost never happens.

With the current structure, if you use @layer components in the global.scss file, it will put it after the utilities, making the utilities unusable against any component.

Just changing the order as follows solves this problem:

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

@import 'common/global';

I would also change the global file with layers to incentivize its use:

// according to tailwind documentation this should be in index.php body with font-sans class. Otherwise I would use the base layer
// body {
  // @apply font-sans;
// }

@layer components {
  .brand {
    @apply text-3xl font-medium text-indigo-500;
  }
}

I can do a pull request if wanted :)

[frankstallone]

I re-implimented this in my theme and all works well. Thanks for the best practices @SergiArias!

[frankstallone]

I have a case where I cannot use @layers and it may be a Tailwind thing but wanted to mention it here as it took me a while to debug. Right now this works:

// If this is in any @layer, the forms.scss file cannot access the %btn placeholder
@import 'components/button';

@layer base {
  @import ...
  ...
}

@layer components {
  @import ...;
  ...
}

// Always included in the build
// Ref: https://tailwindcss.com/docs/optimizing-for-production#removing-all-unused-styles
// Gravity Forms
// Since this tells PurgeCSS nothing:
// <?php gravity_form(1, false, false, false, '', true, 12); ?> does not tell PurgeCSS anything about the markup we have to exclude it from the @layers
@import 'partials/forms';

I originally had @import 'components/button'; in base and yarn build:production would build everything in the SCSS except for this line ~53 of the forms.scss:

.button,
.gform_footer input[type='submit'] {
    @extend %btn;
}

[SergiArias]

Here the problem is the extend, which is a scss function, and probably it confuses Tailwind, as first the scss is transformed into css, before all the Tailwind processing. Can you post your %btn definition? By the way, I think a button is a component so I would use the components layer.

Anyway, I read in an article about the efficiency of the @extend and it concluded that in case gzip is active, extending produces larger files than just repeating styles. I avoid the @extends since I read that and I would simply use @apply.

About the gravity forms markup, there are many strategies to achieve what you want while still using the @layers. One is to ignore the classes: tailwind.config.js:

    options: {
      safelist: [
        'ls:mb-44',
      ],
    },

Another one is to create a php file that you won't access with all the generated markup so it reads it and ignore it.

And my preferred one is just to indicate that purgecss should ignore a specific portion of classes:

@layer components {
  /* purgecss start ignore */

  .menu-item {
    > a {
      @apply block h-full;
    }

    .svg-inline--fa {
      @apply block;
    }
  }

  /* purgecss end ignore */
}

Hope it helps!

[frankstallone]

That was a really well thought out answer. I was using @extend similarly to @apply with @apply!

button.scss

%btn {
  @apply cursor-pointer no-underline inline-block px-6 py-4 rounded-sm transform transition bg-goldRush-200 hover:bg-goldRush-100 hover:text-goldRush-900 hover:-translate-y-0.5 focus:ring-goldRush-200 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-offset-2 active:bg-goldRush-300 uppercase tracking-wider font-semibold text-lg text-center text-goldRush-800 shadow-lg w-full;

  transition: 0.2s ease;
}

As for the GF situation, this is my first time using purgecss and didn't even think to look up if it had an ignore. Thanks for the tip!