Upon closer examination, it appears that there is a discrepancy between the documented behavior of Tailwind and its actual functionality.
According to the documentation regarding 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 primary style.css file structured as follows:
@tailwind base;
@tailwind components;
// Please note: you could also include 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;
However, in reality, this consistently triggers a build error for a valid reason. Tailwind injects the utilities file with classes generated from the tailwind.config.js file.
CSS compilation occurs sequentially, so references to bg-blue-700 are unavailable for application until the utilities have been imported and processed.
Despite the recommendation in the documentation, rearranging component classes after the utilities section rectifies the compile error:
@tailwind base;
@tailwind components;
@tailwind utilities;
// Please note: you could also include 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;
}
Although not an ideal solution, this approach proved effective for me.