DEV Community

Cover image for I Spent 3 Months Learning The WRONG CSS Don't Make My Mistake
Harsh
Harsh

Posted on

I Spent 3 Months Learning The WRONG CSS Don't Make My Mistake

#webdev #css #beginners #tailwindcss

The Night I Almost Threw My Laptop Out The Window

It was 3:17 AM.

My eyes were burning. My back ached. And I had been staring at the same div for over an hour.

Not building a Tesla dashboard. Not creating a Netflix clone. Just trying to move a stupid box to the center of the screen.

I tried margin: auto. Nothing.

I tried text-align: center. The box laughed at me.

I copied code from Stack Overflow that I didn't understand. The box disappeared entirely.

I remember thinking: "Maybe web development just isn't for me."

Then my phone buzzed. A friend texted: "Bro, just use Tailwind. Why are you suffering?"

I ignored him. Thank God.

Because that suffering? It was the best thing that ever happened to me.

And by the end of this article, you'll understand why — and exactly which CSS you should learn first to save yourself months of confusion.

The Hard Truth Nobody Tells Beginners

Here's what every tutorial forgets to mention:

You can learn CSS in two orders:

  1. Plain CSS → Tailwind (The Smart Path)
  2. Tailwind → Plain CSS (The "Why Is Everything Broken?" Path)

I accidentally took Path #2. It cost me 3 months of confusion.

Let me show you what I mean.

Plain CSS: The Language of the Web

Plain CSS (or Vanilla CSS) is what the browser actually understands. When you write this:

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 8px;
}
Enter fullscreen mode Exit fullscreen mode

You're speaking the browser's native language.

🔥 Why Plain CSS Is Non-Negotiable

  • It teaches you HOW the web works — box model, cascade, specificity
  • Every framework is built on it — Tailwind, Bootstrap, Material UI, all of them
  • You can debug anything — when something breaks, you know where to look
  • Zero dependencies — no build tools, no config, just you and the browser

💀 The Pain Points

  • Writing display: flex 50 times a day gets old
  • Naming classes is surprisingly hard (.red-button vs .btn-danger vs .delete-action 🤯)
  • CSS files turn into spaghetti after 500 lines
  • One typo can break your entire layout

Tailwind CSS: The Developer's Shortcut

Tailwind is what happens when developers get tired of writing the same CSS over and over.

<div class="flex items-center justify-center p-4 rounded-lg">
  <!-- Content -->
</div>
Enter fullscreen mode Exit fullscreen mode

No CSS file. No class naming. Just utility classes that do exactly one thing.

⚡ Why Developers LOVE Tailwind

  • Build UIs at lightspeed — once you know the classes, you fly
  • No context switching — HTML and styling in one place
  • Consistent by default — no more random margin values
  • Delete dead code automatically — PurgeCSS removes unused styles

😱 The Hidden Trap

Your HTML looks like this:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">
  Click Me
</button>
Enter fullscreen mode Exit fullscreen mode

If you don't understand CSS, this is just random incantations you're copying from documentation.

And that's where my friend Raj's story comes in...

The Story of Raj (It Could Be You)

Raj was smart. Raj was eager. Raj made one mistake.

He watched a YouTube tutorial that built a beautiful dashboard in 20 minutes using Tailwind. It looked magical. So he thought: "Why waste time learning old CSS? I'll learn the modern way."

For 2 weeks, Raj felt like a genius. He built clone after clone. Everything worked.

Then he got his first internship.

Day 1: His mentor asked him to fix a simple layout bug in their legacy codebase — written in plain CSS.

Raj froze.

He didn't know what position: relative actually did. He had never touched z-index. The box model was just a theoretical concept he'd skimmed over.

Three hours later, he hadn't fixed the bug. His mentor had to re-assign it to someone else.

Tailwind without CSS is like driving a Ferrari with no idea what's under the hood. Beautiful until something breaks.

The Million-Dollar Question: Which Should YOU Learn First?

After researching and talking to dozens of developers, here's the truth:

Learn Plain CSS first. Master the fundamentals. Then learn Tailwind and watch your productivity explode.

Not because Tailwind is bad — it's actually incredible. But because CSS is the foundation, and Tailwind is just shorthand.

You wouldn't learn shorthand before learning to write full sentences, right?

Your 8-Week Roadmap to CSS Mastery

📍 Weeks 1–4: Plain CSS Fundamentals

Week 1: The Box Model

  • Margin, padding, border, content
  • Width, height, box-sizing
  • Block vs inline elements

Week 2: Layouts That Actually Work

  • Flexbox (spend extra time here — it's 80% of modern layouts)
  • CSS Grid for 2D layouts
  • Positioning (static, relative, absolute, fixed)

Week 3: Making Things Beautiful

  • Typography (font sizes, weights, families)
  • Colors (hex, rgb, hsl, opacity)
  • Borders, shadows, gradients

Week 4: Responsive & Interactive

  • Media queries for mobile
  • Pseudo-classes (:hover, :focus, :active)
  • Transitions and simple animations

🛠️ Build These Mini-Projects:

  • A profile card that looks good on mobile and desktop
  • A responsive navbar that turns into a hamburger menu
  • A 3-column pricing table
  • A login form with validation states

📍 Weeks 5–6: Tailwind Time

Week 5: Tailwind Basics

  • Setup (yes, it's annoying — push through it)
  • Understanding the utility classes
  • Responsive prefixes (md:, lg:)

Week 6: Tailwind Pro Moves

  • @apply directive for reusable components
  • Custom configuration
  • Dark mode
  • Animations

Pro tip: Rebuild your 4 mini-projects in Tailwind — you'll cry tears of joy at how fast it goes now. 😄

The Cheat Sheet That Changes Everything

Plain CSS Tailwind Class
display: flex flex
justify-content: center justify-center
align-items: center items-center
flex-direction: column flex-col
padding: 1rem p-4
margin: 0.5rem m-2
width: 100% w-full
height: 100vh h-screen
color: #3b82f6 text-blue-500
background-color: #000 bg-black
border-radius: 0.5rem rounded-lg
box-shadow shadow-md

Pattern spotted? Tailwind classes are literally CSS properties shortened. justify-center = justify-content: center. p-4 = padding: 1rem.

When you know CSS, Tailwind is just typing faster.

The Ultimate Comparison

Plain CSS First Tailwind First
Month 1 Slow, frustrating, but LEARNING Fast, exciting, building things
Month 3 Solid foundation, can build anything Can build anything if it's in Tailwind
First Job Comfortable with ANY codebase Panic when seeing plain CSS
Debugging Find issues quickly "Why is this div... oh wait, I don't know CSS"
Long-term Framework-agnostic master Tailwind-dependent (for now)

The Honest Truth

If you start with Tailwind, you'll build cool stuff faster. I won't lie to you.

But 6 months from now, when you encounter a codebase without Tailwind — and you will — you'll feel like a beginner all over again.

If you start with Plain CSS, you'll struggle for 4 weeks. You'll curse at your screen. You'll question your life choices.

But 6 months from now, you'll be able to open ANY codebase — Tailwind, Bootstrap, Material UI, custom CSS from 2015 — and understand exactly what's happening.

The choice is yours: 4 weeks of frustration now, or years of "I don't get it" later.

What Successful Developers Actually Say

I asked multiple senior developers the same question. Every single one said something similar:

"I'm so glad I learned CSS before frameworks. I can use ANY tool now. My friends who started with frameworks are stuck — they panic whenever they see vanilla CSS."

One senior dev put it best:

"We don't care what frameworks you know. We care if you understand CSS. Everything else is learnable in a week."

Your Next 5 Minutes

Here's exactly what to do right now:

1. Bookmark this article (you'll want the cheat sheet later)

2. Open CodePen or VS Code

3. Write this HTML:

<div class="box">Center me, please!</div>
Enter fullscreen mode Exit fullscreen mode

4. Using ONLY plain CSS, center that div both horizontally and vertically on the screen

5. Stuck? Good. Struggle for 20 minutes. Google things. Try random stuff. Get frustrated.

6. Then search "how to center a div with flexbox" — learn it, understand it, own it.

That 20 minutes of struggle? That's where the learning happens. That's the rite of passage. That's what separates "tutorial followers" from actual developers.

Let Me Hear From YOU 👇

Are you team Plain CSS first? Or did you start with Tailwind and regret it?

Drop your story in the comments — I read every single one. Your experience might help another beginner avoid the same mistake.

And if this article saved you from 3 months of confusion, hit that ❤️ button. It tells me I'm actually helping people, and it makes my day every single time. 🙏

Disclosure: AI helped me write this — but the bugs, fixes, and facepalms? All mine. 😅

Every line reviewed and tested personally.

Hey! I'm **Harsh* — just a student who loves breaking down complex web dev topics into simple, honest guides. No fluff, no "10x developer" nonsense, just real talk that actually helps.*

Follow me for more articles that save beginners from the mistakes I made. See you in the comments! 🚀

Top comments (2)

Collapse
 
alohci profile image
Nicholas Stimpson •

Since you ask... I learnt CSS before Tailwind, before Bootstrap, before the grid frameworks that preceded Bootstrap ever existed.

I've read widely about Tailwind and know plenty about how to use it effectively. I've never felt the slightest inclination to want to use it though.

Typing bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 and the like on thousands of elements when I could type the declarations a handful or times or so, and then just add one or a few meaningful class names describing the content to each element seems so much easier and maintainable.

Collapse
 
harsh2644 profile image
Harsh •

That's a fair perspective Coming from a pure CSS background, I can totally see why Tailwind might feel counterintuitive. The separation of concerns has been a web dev mantra for years. For me personally, the productivity boost on large teams and the fact I never have to name another class or worry about CSS breaking something elsewhere makes it worth it. But I completely respect the meaningful class names' approach – there's something clean about semantic HTML/CSS.