What is the reason for the "add custom component classes before your utilities" recommendation?

[nicolas-brousse]

In documentation I saw the following:

Add custom component classes before your utilities

But I didn't found more details about the risk of printing custom components after utilities?

Since I'm looking to use tailwind on our future projects, I'm cleaning our files structure. I also plan to do components with a ruby gem (view_component).

I've tested multiple structures. The one that I appreciate more, is the one that load component css with a javascript import. So the css, is printed at the end of final file.
So I would like to be sure it may not annoy me later.

I'm locking for this solution since I do not need to add a css import line for each component I create.

To give more context, here is my dev environment and files structure:

Environment:

• Rails 6
• Tailwind 1.4.6
• wepacker 5 / webpack 4

Files structure:

app/components
├── alert_component.rb
└── alert_component
    ├── alert_component.css
    ├── alert_component.html.erb
    └── alert_controller.js (loaded by `component.js` and load `alert_component.css`)

app/javascript
├── packs
│   ├── application.css (contains tailwind imports)
│   └── application.js
└── components.js (looks for ../components/**/*_component.js file and load them)

Thanks

[nicolas-brousse]

... well it's simply about css order.

Having components printed at the end, does mean that utilities will not be able to be used in html. Component css will have the precedence.

[simonswiss]

Correct.

That's the cascade in CSS: styles declared later in the file - with equal specificity - will take precedence.

Since Tailwind utilities are very low in specificity, almost anything declared after them will override them. 👍