Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I want to use Tailwinds apply feature in my Gridsome project. But error gets thrown that css classes from tailwind cannot be found.

Steps to reproduce:

1) Create new Gridsome project

2) Install tailwind plugin Github page Npm page

3) Create css file in assets folder and import in main.js

import "~/assets/style.css"
4) Create css class in css file
5) Use @apply in css with tailwind component
Nothing happens... css file is properly imported bacause normal css gets applied
Some elements like rounded seem too work but others like bg-blue-500 dont. 
                It looks like only simple utitlity classes can be used with apply github.com/tailwindcss/custom-forms/issues/12
– Kelvijn
                Aug 1, 2019 at 10:47
                Another finding: bg_custom_color defined in tailwind.config,js dont throw error and style gets applied
– Kelvijn
                Aug 1, 2019 at 11:15
                I'm able to use @apply in both main.css and within the <style> tag in my vue files. I do have to add @apply to each declaration to avoid a syntax error in vscode, but it works. Maybe a config issue?
– iAmBentley
                Aug 8, 2019 at 0:06
From what I can figure out, there seems to be a disconnect with Tailwind's documented behavior and its actual behavior. 
As per the documentation on extracting components using @apply:
  
..Classes like this should be added directly after the @tailwind components directive to avoid specificity issues.
In practice this results in a main style.css file which looks like the following:
@tailwind base;
@tailwind components;
// Note: you could also just add a custom CSS file here. 
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
.btn-blue:hover {
  @apply bg-blue-700;
@tailwind utilities;
In reality, however, this always throws a build error, and for a totally logical reason. Tailwind injects the utilities file with classes derived from the tailwind.config.js file. 
CSS is compiled linearly, so bg-blue-700 doesn't exist for reference via apply until utilities is imported and read through. 
Even though the documentation advises against it, moving component classes after utilities resolves the compile error:
@tailwind base;
@tailwind components;
@tailwind utilities;
// Note: you could also just add a custom CSS file here. 
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
.btn-blue:hover {
  @apply bg-blue-700;
Not ideal, but that's what worked for me.
                The answer says put components after utilities but the code says otherwise .. I couldn't make an edit to correct it
– Sodj
                Jan 11, 2021 at 18:11
According to the documentation, wrap it in @layers components {} to prevent unwanted behavior
like this:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layers components {
    // Note: you could also just add a custom CSS file here. 
    .btn-blue {
      @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
    .btn-blue:hover {
      @apply bg-blue-700;
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.