Somewhere along the way, your HTML stopped being readable

You picked up Tailwind to build faster, and it delivered. You felt the difference, because your first workable demo was up in minutes.

Then you came back to refactor — only to find many elements packed with 17 utility classes. You couldn’t see the structure of the page anymore. You had to rebuild it in your head just to change one thing.

  • Coding became mentally exhausting, not fun
  • Your HTML became a horrible bloated mess

Then you wonder what you were thinking of when you picked Tailwind up.

“This doesn’t work”, you whisper to yourself.

You miss just writing CSS — it’s a different kind pain, but better than this. But going back feels like a step backward. So you keep stacking utilities, telling yourself that’s just how Tailwind works.

And your frustration builds, week after week.

If you use Tailwind the way it’s commonly explained, you might as well just stick with CSS.

Tailwind was never the problem.

The real problem is that you were led to believe you had to choose either Tailwind or CSS.

You don’t have to choose between Tailwind and CSS

You can use them both — and get the prototyping speed and the clean HTML at the same time.

Tailwind isn’t a CSS replacement. It’s three things built into one:

  • A design layer: A way to write design tokens that you can build on
  • A styling layer: Use utilities in HTML or through @apply in CSS
  • A build layer: Simplifies your code and build process

Once you see that, the rules change — and CSS enters the game again. You’ll be able to write utilities in HTML when that’s faster, switch to @apply in CSS when that’s cleaner, and build components when it makes sense.

And this is just the beginning.

When you see Tailwind as three layers, a door opens: Everything you build can now be sorted into four categories.

The rules for using Tailwind changes in each of these categories. Master the rules in each category and Tailwind supports everything you do.

The Layouts System

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

The Typography System

Responsive typography with multiple typefaces become a cinch.

The Theming System

Theming become a simple matter of writing CSS Variables, not utility-littered variants.

The Effects System

You can add beautiful effects with a drop of a utility

Building feels good again — quick, intuitive, easy to adjust. Less fighting the framework, more making the thing.

That future is possible today.

Get Unorthodox Tailwind

See The Difference For Yourself

Here’s a simple card component with a button.

The Layouts System

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

And here’s the HTML built with Tailwind vs Unorthodox Tailwind

Standard Tailwind 26 classes 
<div class="flex flex-col gap-[1.125rem] p-[1.5rem] border-2 border-[oklch(0.2487_0.0274_298.48)] rounded-xl">
  <h3 class="text-2xl font-bold leading-[1.4] font-[june-expt-variable] text-[oklch(0.8403_0.1724_84.08)]">The Layouts System</h3>
  <p class="text-[21px] leading-[1.5] text-[oklch(0.89023_0.0195_276.301)]">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-[21px] leading-[21px] rounded-xl bg-[oklch(0.8403_0.1724_84.08)] text-[oklch(0.18_0.02_294.14)] hover:bg-[oklch(0.74_0.16_82.99)]">See how it works</button>
</div>
Unorthodox Tailwind 8 classes 
<article class="card vertical gap-3">
  <h3 class="h4 text-zorange-500">The Layouts System</h3>
  <div class="prose">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>

You decide which is more readable.

I've Always Searched For Better Ways to Style Websites

Zell

My name is Zell.

I built many websites over the last 10+ years, from small personal blogs to large web projects, all in CSS without any frameworks.

But I wanted to move faster. So I tried Tailwind. And something clicked — I couldn’t go back to pure CSS after that.

There was just one problem: I couldn’t stand the bloated mess Tailwind creates, 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 found the trick that unravelled everything… and the Unorthodox Tailwind methodology was born.

Then it matured into the four systems — Layout, Typography, Theme, and Effects — that composes CSS into one clean, cohesive whole.

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. You’ll learn that system here.

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

But it took major mindset shifts to get here. I’m documenting these shifts for you inside Unorthodox Tailwind to help you get to where I am.

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 done letting a rulebook decide how you build.

…but not if:

You want a plugin to install and forget, or you’d rather be told the rules than decide for yourself.

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

Prototype with Tailwind’s speed, keep HTML you can actually read, and adjust styles in seconds instead of untangling classes.

And that growing dread every time you open a file goes away forever.

$99 only
Get Unorthodox Tailwind

Pay once. Lifetime updates. Instant access.

Try Unorthodox Tailwind for 30 days

Go through the system and use it on a real project. If you don’t feel refreshed about the way you use Tailwind and CSS, email me and I’ll refund every cent.

Frequently Asked Questions

How Would You Style Your Websites 30 Days Later?

You spent years without a framework because you wanted control. Then Tailwind gave you speed, but boxed you right back in.

You have two choices:

Keep fighting it…

  • Fighting CSS Grid to build a simple layout?
  • Wiring up themes by hand?
  • Writing complex code just to use two typefaces?
  • Hand-rolling shadows and effects every time?

…or make Tailwind yours:

  • Build most layouts in seconds
  • Theme easily with pigments and variables
  • Use multiple typefaces easily
  • Get effects like nice shadows by dropping a utility

The choice is yours.

The real hidden cost is a growing sense of dissatisfaction every time you open the file — the quiet sense that you could be building better than this.

Get Unorthodox Tailwind