Tailwind caused your HTML to stop being readable…

And you can’t just “fix it” by going back to CSS

You picked up Tailwind for various reasons.

  • Maybe it’s a sense of curiosity
  • Maybe you just wanted to make things better somehow.

And your first try really blew your mind away.

Something clicked — maybe you built something really quickly, or you enjoy not having to name your selectors. Whatever it is, something did click.

So you tried switching to Tailwind.

But to your horror, in the process of switching, or when you come back to refactor, you find your elements packed with an overwhelming number of utility classes.

  • You feel your HTML became a brick wall — not just a bloated mess
  • And it’s impossible to read without taking everything apart and rebuilding both the HTML and CSS in your head.

Somewhere under your breath, you muttered “F my life. What the hell was I thinking when I decided to try to shift to Tailwind?”

You miss writing CSS — it’s a different kind of pain, but better than this, but going back to CSS feels like taking a step backwards. So you’re somewhat stuck.

You’re in a strange place where nobody understands you. Almost everyone else around seems to be black-and-white about “YES TAILWIND” or “NO TAILWIND”.

But you know better — there’s something good about Tailwind. You might not be able to say what it is, but you just know it.

In the meantime, you continue to code either the Tailwind way or the CSS way, telling yourself that’s just the best you can do for now, with your time constraints.

And your frustration builds up every time you read an HTML or a CSS file. You know something can be better. But what? And how?

The good news is: You don’t have to choose between Tailwind and CSS — there’s a better way. You just don’t use Tailwind in the way it’s commonly presented.

There’s a way to use Tailwind with CSS

And get cleaner HTML and better CSS at the same time

Tailwind is three things built into one:

  • A design layer
  • A styling layer
  • A build layer

It’s not something to replace CSS with.

Once you see that, your mind begins to shift — you might begin to see how Tailwind can be used together with CSS.

This is just the beginning.

As you advance deeper, you might begin to see how you’ll use Tailwind differently in each of the 4 major categories when styling websites and applications.

Layouts

Tailwind excels here with their responsive variants and how it lets you change CSS on the fly without creating additional classes.

When you use these powers together with what CSS gives you, you can build almost any layout without writing more CSS.

Typography

There’s nothing better than using Tailwind’s @apply like convenient Sass includes here.

You can use them to create patterns that can be inherited by other utilities easily. It’s like creating a cascade of styles with your utilities — each one more specific than before.

Theming

Theming is a pain in the ass with Tailwind because you’ll have to add classes for hover, focus, active, selected states. This causes the HTML to become extremely bloated.

Instead of surrendering this as an inevitable Tailwind defect, we use CSS to make things simpler. I’ve taken a step further here by creating a Pigment system that makes styling interactive states super easy with CSS variables.

Effects

Effects are stuff that makes a website look nice. There are tonnes of effects — from gradients, to frosted glass, to highlighting backgrounds.

Once you get some mastery over Tailwind, you can begin to build utilities that let you perform these effects just by dropping the utility. Think of it like Sass includes here too.

You can begin to see that Tailwind works really well with CSS. Your only obstacle is the preconceived notion that it’s either Tailwind or CSS.

Let that go. Then you can begin to experiment and bring in a more advanced — faster, simpler, more effective — way of styling to your projects.

I’ve put everything I know about using Tailwind and CSS together in Unorthodox Tailwind. I’ll tell you more about this later.

Get Unorthodox Tailwind

Here's An Example Of The Difference

Between pure Tailwind, pure CSS, and Tailwind + CSS.

Let’s just say you want to build this simple card.

The Layouts System

Build layouts in seconds — HTML that reads like layout, not a wall of classes.

With Tailwind

You write every single class in the HTML and it gets bloated, horribly. At some point, you know that Tailwind is no different from writing vanilla CSS from scratch each time.

HTML 
<div class="flex flex-col gap-[1.125rem] p-6 border-2 border-zpurple-900 rounded-xl">
  <h3 class="text-2xl font-bold leading-[1.4] font-june text-zorange-500">The Layouts System</h3>
  <p class="text-xl leading-[1.5] text-zpurple-100">Build layouts in seconds --- HTML that reads like layout, not a wall of classes.</p>
  <button class="flex items-center justify-center px-[1.25em] py-[0.5em] text-xl leading-[21px] rounded-xl bg-zorange-500 text-zpurple-1000 hover:bg-zorange-600">See how it works</button>
</div>

With CSS

The HTML is a lot cleaner. But you can’t see how your classes interact with the DOM without pulling up the markup.

So even if it works, you feel a nagging irritation that you’re missing some context if you don’t have the HTML and CSS opened side by side.

HTML 
<article class="card">
  <h3 class="card-title">The Layouts System</h3>
  <p class="card-text">Build layouts in seconds --- HTML that reads like layout, not a wall of classes.</p>
  <button class="card-button">See how it works</button>
</article>
CSS 
.card {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.5rem;
  border: 2px solid var(--color-zpurple-900);
  border-radius: 0.75rem;
}


.card-title {
  font-family: var(--font-june);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-zorange-500);
}


.card-text {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-zpurple-100);
}


.card-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1.25em;
  font-size: 1.25rem;
  line-height: 21px;
  border-radius: 0.75rem;
  background-color: var(--color-zorange-500);
  color: var(--color-zpurple-1000);
}


.card-button:hover {
  background-color: var(--color-zorange-600);
}

With both Tailwind and CSS

The principles of good CSS continue to apply here — you can create components (or elements/objects/utilities; they mean similar things) and insert them into your HTML.

HTML 
<article class="card vertical gap-3">
  <h3 class="h4 text-zorange-500">The Layouts System</h3>
  <div class="prose text-zpurple-100">Build layouts in seconds --- HTML that reads like layout, not a wall of classes.</div>
  <button class="button pigment-orange-filled">See how it works</button>
</article>
CSS 
/*
  button, vertical (a flex column), and prose are written once,
  and reused in every project
*/


@utility h4 {
  @apply font-june text-2xl font-bold;
  line-height: 1.4;
}


@utility pigment-orange-filled {
  --bg-color: var(--color-zorange-500);
  --text-color: var(--color-zpurple-1000);
  --bg-hover-color: var(--color-zorange-600);
}


@utility card {
  padding: 1.5rem;
  border: 2px solid var(--color-zpurple-900);
  border-radius: 0.75rem;
}

Now, if you cover the CSS and just look at the HTML, you still know what’s happening! Same thing backwards: If you cover the HTML, your CSS still makes sense without the markup.

One More Example: Changing Colours On Hover And Focus States — Without the HTML bloat

Simply by using our in-house pigment utility

Now say you wanna create a few buttons with different colours. This should be basic, simple stuff.

With Tailwind only

There’s lots of code to write here — the layout classes, the base colours, and even colours for hover and focus states. Just look at the bloat!

HTML 
<button class="flex items-center justify-center px-[1.25em] py-[0.5em] text-xl leading-[21px] rounded-xl border-2 border-zorange-500 text-zorange-500 hover:bg-zorange-800 hover:text-white focus:bg-zorange-800 focus:text-white">Orange Outline</button>

With both Tailwind and CSS

I’ll cheat a little by showing you my actual pigment system. where I’ve written all the classes needed beforehand, so we only need to change the background, text, and border colours on each state.

HTML 
<button class="button pigment-orange-outline">Orange Outline</button>
CSS 
/* button and pigment defined and reused in every project */


@utility pigment-orange-outline {
  --bg-color: transparent;
  --bg-hover-color: var(--color-zorange-800);
  --text-color: var(--color-zorange-500);
  --text-hover-color: #fff;
  --border-color: var(--color-zorange-500);
}

I've Changed The Way I Build Websites

I became a lot more productive ever since I started using Tailwind + CSS.

Zell

My name is Zell.

I’ve built many websites, small personal blogs to large web projects, from scratch (with pure CSS) over the years in my career. (I didn’t use frameworks because they often come with styles I had to fight against).

There was nothing wrong with this method.

But I changed one day.

I realised I have been rebuilding the same things over and over again — the same layouts, the same buttons, the same styles. The only difference is that they vary a little each time.

  • I hated building the same things over and over again.
  • I wanted to repeat less, but build faster.

That was when I began to experiment with Tailwind.

Something clicked. And I couldn’t go back to pure CSS anymore.

But I couldn’t stand writing CSS the Tailwind way (oh god, the awful bloated HTML), so I set out to find a solution.

One day, while struggling (and promising myself that I’d test Tailwind just one more time), I realized how Tailwind can be used to support CSS, and how CSS can be used to support Tailwind.

And everything I’ve said above unfolded from there — the layout, typography, theming, and effects.

Now I’ve built up a library of useful styles that I pluck-and-play. The best part is this library is built in a flexible way, so I never have to fight my own library styles.

I’d like to share with you the system I’ve discovered in Unorthodox Tailwind.

Geoff Graham

Geoff Graham — Chief Editor @ CSS Tricks

Zell is the rare sort of developer who both knows his stuff and can explain even the most technical jargon in approachable — and even fun — ways!

I’ve taken his courses and always look forward to his writing because I know I’ll walk away with something that makes me a better front-ender.

Geoff Graham
Zoran Jambor

Zoran Jambor — Curator @ CSS Weekly

Zell is a talented developer with in-depth knowledge of front-end technologies and tools. I recommend his books and articles to everyone in the web industry because they’re so well written and full of useful information.

Zoran Jambor
I've been featured in:

My Entire System in Unorthodox Tailwind

A complete system for using Tailwind and CSS together.

The hard part is knowing when to use Tailwind, when to use CSS, and when to use them both.

I’ve been building sites for a long time and I’ve never been happier with the way I write HTML and CSS today.

It took major mindset shifts to get here. I’ve documented these shifts for you inside Unorthodox Tailwind to help you unlock the possibility of using Tailwind and CSS together in a synergistic way.

Chapter 1: Introduction
6 lessons

The mindset shifts that make everything else click.

  • See what Tailwind brings to the table, and where it falls short
  • The first, most important step
  • A simple unorthodox system
  • A preview of the the system I use
  • The four-part map of the whole system
See the lessons
  1. Introduction
  2. What Tailwind brings to the table
  3. Tailwind: The Good and The Bad
  4. The First and Most Important Step
  5. Simple Unorthodox System
  6. The System I Use
Chapter 2: Tailwind Fundamentals
6 lessons

Gets you fluent in how Tailwind works. By the end you can read the docs at a glance.

  • How Tailwind's utility system works
  • Installing Tailwind without it's aggressive resets
  • 7 most important utility groups
  • Guessing the right class without checking the docs
  • What defaults to replace, and why
See the lessons
  1. Introduction
  2. Installing Tailwind
  3. Using Tailwind utilities
  4. Understanding Tailwind's utility system
  5. Understanding Tailwind values
  6. Understanding Tailwind variants
Chapter 3: Unorthodox Fundamentals
7 lessons

The core moves that make Tailwind and CSS work as one.

  • The real ability behind Tailwind utilities
  • The difference between components and utilities
  • Managing specificity perfectly when using both Tailwind and CSS
  • Debug Tailwind and CSS, fast
  • The composable utility system, explained
See the lessons
  1. Introduction
  2. Making Simple Tailwind Utilities
  3. Components vs Utilities
  4. Specificity, Cascade, and CSS Layers
  5. Debugging Tailwind Styles
  6. Composable Utility System
  7. Create lots of components
Chapter 4: The Layouts System
10 lessons

Build layouts in seconds, and have HTML read like layout instead of a wall of classes.

  • Why Tailwind shines here
  • The 4 types of layouts: Shell, Macro, Micro, and Positioning
  • Each type of layout explained in detail — with examples and code
  • Better variants that lets you visualize your layouts immediately across different breakpoints
  • Tips and techniques for sections, wrappers, and containers that organizes layouts into repeatable patterns
See the lessons
  1. Tailwind is great for layouts
  2. Four Types of Layouts
  3. Building Shell Layouts
  4. Building Macro Layouts
  5. Better Responsive Variants
  6. A collection of maximum widths
  7. A note on grid wrappers
  8. Working with sections
  9. Building Micro Layouts
  10. Positioning Layouts
Chapter 5: The Typography System
8 lessons

Use 3-5 typefaces in your design. And create responsive typography without complexity.

  • Why Tailwind's typography system is weak here
  • A consistent font-size scale that works across design software and coding projects
  • Responsive typography without the fluid-math
  • Making better prose
  • Vertical rhythm demystified and simplified
See the lessons
  1. Introduction
  2. A system for using multiple typefaces
  3. Tailwind's font-size system
  4. Finding your font-size system
  5. My font-size system
  6. A simple responsive typography system
  7. The main body
  8. Vertical rhythm
Chapter 6: The Theme System
8 lessons

Handles colours, gradients, SVGs, and themes that feel clumsy in pure Tailwind.

  • Why Tailwind's colour tokens is a strong concept
  • The pigment system to style hover, active, and selected states with CSS Variables
  • Naming conventions for states that make sense
  • Extendable gradients with unlimited stops
  • Coloring SVG icons with Tailwind
See the lessons
  1. Introduction
  2. Tailwind's colour system
  3. The pigment system
  4. Tailwind's gradient system
  5. A friendlier gradient system
  6. Handling SVG fill and stroke
  7. Improving Tailwind's colour palette
  8. A simple way to theme
Chapter 7: Useful Tools
5 lessons

Deep dive into functional utilities and creating custom variants.

  • How to functional utilities work
  • Creating useful custom variants — like interact and interact-within
  • Making scaffolds for your own project
  • Extending Tailwind on your terms
See the lessons
  1. Introduction
  2. Making functional utilities
  3. Custom variants
  4. Scaffolding tools
  5. Extending Tailwind
Chapter 8: Effects
11 lessons

Create visual effects like text strokes, strikethroughs, layered shadows by dropping a single utility

  • The mental model to build effects that are easy to use
  • A layered elevation system you tune with variables for nicer shadows
  • Text effects not built into most frameworks — diagonal strikethroughs, outlined headlines, multi-line highlights, and more
  • Transitioning shadows without the usual jank
  • Frosted glass, border gradients, and more
See the lessons
  1. Introduction
  2. Vertical text
  3. Strikethrough text
  4. Text stroke
  5. Highlighting text
  6. Nicer shadows
  7. Transitioning shadows
  8. Drop shadows
  9. Dark mode tricks
  10. Gradient borders
  11. More effects to explore
Chapter 9: Putting Everything Together
8 lessons

The process, the CSS structure, and a cheatsheet you'll keep open.

  • Decision framework on when to use Tailwind directly, when to build components, when to use CSS
  • A CSS structure that scales
  • Adjustments to make if you build libraries
  • A cheatsheet that gives you the entire method at a glance
See the lessons
  1. The Unorthodox Tailwind process
  2. The 4 systems combined
  3. Create components liberally
  4. Advanced tips
  5. My CSS Structure
  6. A Cheatsheet
  7. Consolidating your thoughts
  8. Parting words

This is for you if…

You’ve used Tailwind, you know CSS, and you’re ready to make the best use of both technologies.

…but not if:

You’re happy with pure Tailwind, or pure CSS, and you don’t wanna explore the beauty in how they work together.

Get The Entire System Into Your Hands

Unorthodox Tailwind

9 Chapters, 69 lessons

  • 1. Introduction 6 lessons
  • 2. Tailwind Fundamentals 6 lessons
  • 3. Unorthodox Fundamentals 7 lessons
  • 4. Layouts System 10 lessons
  • 5. Typography System 8 lessons
  • 6. Theming System 8 lessons
  • 7. Useful Tools 5 lessons
  • 8. Effects System 11 lessons
  • 9. Putting Everything Together 8 lessons
  • Total 69 lessons
Bonus: Splendid Layouts

Every layout utility I use to build responsive layouts without writing more CSS. Worth $60, yours for free.

Remove the nagging frustration that’s been building up when you read HTML or CSS files.

Write styles that you can be proud of. Apply them both to HTML and CSS. And create a system where your styles add onto each other in a beautiful, maintainable way.

$99 only
Get Unorthodox Tailwind

Pay once. Lifetime updates. Instant access.

What people are saying

I actively avoided Tailwind until recently because I really enjoy writing CSS (don’t tell anyone) and hate the “wall of classes” look that Tailwind brings to the HTML.

It’s like this course was written specifically for me launching at the exact right time.

— Brett Egbert

I really love the way you’re talking about using tailwind and moving beyond SCSS. The article on @apply made me realise that I could sprinkle Tailwind where it’s helpful whilst still authoring expressive css.

I’ve restructured my framework with @apply and postcss and have been really enjoying it.

Jerome Toole
Jerome Toole

Try Unorthodox Tailwind for 30 days

If you don’t think Unorthodox Tailwind is changing the way you’re writing Tailwind and CSS, then let me know and I’ll refund every cent.

Frequently Asked Questions

How much better will your HTML and CSS be 30 days later?

Will you:

Keep doing the same thing you’ve been doing:

  • Write pure Tailwind or pure CSS
  • Create layouts from scratch over and over again
  • Struggle with using more than 2 typefaces
  • Wire up themes by scattering colour variables everywhere
  • Copy-pasting complex effects from online sources

… or try something entirely new

  • Use Tailwind and CSS together
  • Build layouts using a quick and proven system
  • Use multiple typefaces easily
  • Theme easily with pigments and variables
  • Get effects like nice shadows by dropping a utility

The choice is yours.

You already know you have a growing sense of dissatisfaction every time you open your HTML or CSS file.

The real hidden cost is ignoring that dissatisfaction — knowing you can be doing better than this, yet doing nothing about it.

30 days later, things can be very different from where they are today. You can be happy and satisfied with how your HTML and CSS look.

Get Unorthodox Tailwind