Question Investigation 4 Tailwind or CSS - herougo/SoftwareEngineerKnowledgeRepository GitHub Wiki
Should a team use Tailwind or Vanilla CSS?
source: sources listed here as well as ChatGPT
Tailwind Pros
- Speed of Development: no utility classes to learn, which means you can contribute right away.
- Styling and Component Together in 1 File: This means you don't have to keep switching between files (personal preference to some people).
- Automatically Exclude Unused Styles
- Easy Style Deletion
- Autocomplete Support
- Smaller CSS Bundle: Only the used classes are included in production, resulting in a small final CSS bundle.
Tailwind Cons
- Bloated Class Name Lists: When you have className='...', the '...' section can get really long and hard to read
- Not Great for Non-Component-Based Code
- Learning Curve: Requires learning Tailwind's naming conventions and config system.
Vanilla CSS Pros
- Full Control & Customization: You can style elements exactly how you want without being constrained by a framework’s utility classes.
- No Dependencies: No build tools or frameworks required. Works out of the box in the browser.
- Separation of Concerns: Keeps your HTML clean and styles in separate .css files, aligning with traditional best practices.
Vanilla CSS Cons
- Slower Development: harder to onboard to a new project (especially without a strategy like BEM).
- Style Duplication: Without a strategy like BEM or CSS Modules, duplication and specificity issues can build up.
Sources
Reddit: Modern CSS vs Tailwind
[x] https://www.reddit.com/r/css/comments/1c0x227/modern_css_vs_tailwind/
Freelancer anecdote
I was contributing to the tailwind project within seconds—but the scss project involved so much more discovery. How did they set up their utilities? Grids? Rhythms/spacing? Colors? Type? For a given module where were all the different partials that it can inherit from? How do they combine? What inheritance strategy should I adopt to make my changes?
Another comment quote
Tailwind I think is fine for applications and large teams that need a standardized class naming system between teams, but for actual websites I think it’s a little much.
Reddit: Is CSS Frameworks Like Tailwind Is Really Better?
[x] https://www.reddit.com/r/webdev/comments/15chth7/is_css_frameworks_like_tailwind_is_really_better/
Cory House
“I don’t need Tailwind. I’m a CSS expert.”
⚠️Will your docs will be as comprehensive?
⚠️Will your class structure will be as thoughtful?
⚠️Will your dev tools and extensions be as robust?
⚠️Will your build automatically exclude unused styles?
⚠️Will new hires potentially already have experience with your approach?
⚠️Does your entire dev team have a shared understanding of your CSS strategy?
The answer to these questions is almost certainly "No."
So, the most likely outcome of not using Tailwind...is creating an inferior alternative to Tailwind.
More things that are hard to get right in plain CSS:
⚠️ Will your solution provide autocomplete support for class names?
⚠️ Will your solution support hovering class names to see the styles they apply?
⚠️ Will your solution avoid scoping issues?
⚠️ Will your solution support theming?
⚠️ Will your solution assure we don’t repeat styles?
⚠️ Can I safely delete a style and know it won’t break other spots?
These are handled by Tailwind.
Other Reddit
[x] https://www.reddit.com/r/webdev/comments/1f89fap/is_tailwind_better_than_using_pure_css/
Personal Thoughts
✅ Question 1: What if you want a tailwind equivalent of a "btn" CSS class for all of your buttons?
✅ Question 2: What if you put tailwind classes into an object (for organization) that gets turned into a className string at runtime?
❓ Question 3: The code referenced in the answer to question 1 looks good, but how do you combine tailwind class groups together?
Conclusion
You should use what your team prefers.