Tailwind CSS for WordPress Developers: Complete Guide

If you've been styling WordPress themes with traditional CSS, Tailwind CSS might seem backwards at first. But once it clicks, you'll never want to go back.

---

WordPress CSS vs Tailwind

Traditional WordPress Approach

/ style.css /
.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

.hero-button {
  padding: 0.75rem 1.5rem;
  background-color: white;
  color: #667eea;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: transform 0.2s;
}

.hero-button:hover {
  transform: scale(1.05);
}

  
Welcome

  Get Started

Tailwind Approach

  
Welcome

  

    Get Started
  

No CSS file needed. All styling is in the HTML.

---

Why Tailwind?

Problems with Traditional CSS

Issue

Description

Naming things

.hero-section-wrapper-inner anyone?

CSS bloat

Unused CSS accumulates

Specificity wars

!important everywhere

Context switching

Jump between HTML and CSS

Inconsistency

Different spacing everywhere

Tailwind Solutions

Benefit

How

No naming

Classes describe what they do

No unused CSS

Build-time purging

No specificity issues

Flat utility classes

No context switching

Style where you use

Design system built-in

Consistent spacing, colors, etc.

---

Core Concepts

Utility Classes

Each class does one thing:

Spacing Scale

Tailwind uses a consistent spacing scale:

Class

Value

p-0

0

p-1	0.25rem (4px)

p-2	0.5rem (8px)

p-4	1rem (16px)

p-6	1.5rem (24px)

p-8	2rem (32px)

p-12	3rem (48px)

p-16	4rem (64px)

This applies to margin (m-), padding (p-), gap (gap-), width (w-), and more.

Responsive Design

Prefix classes with breakpoint:

Prefix

Breakpoint

(none)

0px

sm:

640px

md:

768px

lg:

1024px

xl:

1280px

2xl:

1536px

State Variants

Apply styles on hover, focus, etc:

---

Common Patterns

Card Component

WordPress way:

.card {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

Tailwind way:

  
Card Title

  
Card content here.

Button

  Click me




  Cancel

Navigation

Hero Section

  

    

      Build Something Amazing
    

    
      Create beautiful websites without the complexity of traditional CSS.
    

    

      

        Get Started
      
      

        Learn More
      
    

  

---

Setting Up Tailwind

With Next.js

npx create-next-app@latest my-app
Select "Yes" for Tailwind CSS when prompted

Manual Setup

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure tailwind.config.js:

/ @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app//*.{js,ts,jsx,tsx}',
    './components//*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add to your CSS:

/ globals.css /
@tailwind base;
@tailwind components;
@tailwind utilities;

---

Customization

Custom Colors

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
        },
      },
    },
  },
};

Use: bg-brand-500, text-brand-700

Custom Fonts

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
};

@apply for Repeated Patterns

When you repeat the same classes, extract them:

/ globals.css /
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors;
  }
  
  .btn-secondary {
    @apply px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors;
  }
}

Use: Click

---

WordPress Theme Comparison

header.php → Header Component

WordPress:

  

    

      
    
     'main-nav']); ?>
  

.site-header {
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

Tailwind + React:

export default function Header() {
  return (
    

      

        

          Site Name
        
        

      

    

  );
}

---

Dark Mode

Enable in Config

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media' for system preference
};

Use Dark Variants

  

    Heading
  

  
    Content
  

---

Tips for WordPress Developers

1. Stop Fighting It

The class lists look crazy at first. Trust the process.

2. Use IntelliSense

Install "Tailwind CSS IntelliSense" VS Code extension. It autocompletes classes and shows values.

3. Components Are Your Friends

Extract repeated markup into React components, not CSS classes.

4. Don't Prematurely @apply

Write utility classes first. Only extract when you're actually repeating.

5. Check the Docs

tailwindcss.com/docs is excellent. Use the search.

---

Common Questions

Q: Isn't this just inline styles?

No. Tailwind classes:

• Are responsive (md:, lg:)

• Have states (hover:, focus:)

• Follow a design system (consistent spacing)

• Get purged in production (no unused CSS)

Q: What about separation of concerns?

Tailwind embraces "locality of behavior"—styles live with the component they style. This makes components self-contained and portable.

Q: How do I work with designers?

Tailwind's constraints make designs consistent. Share the config file for color/spacing tokens.

Q: What about existing CSS?

Tailwind works alongside regular CSS. Migrate gradually.

Q: Which framework works best with Tailwind?

Both Next.js and Astro have excellent Tailwind integration built-in.

---

Resources

• Official Docs: tailwindcss.com

• Component Examples: Tailwind UI

• Free Components: Headless UI

• VS Code Extension: Tailwind CSS IntelliSense

• Playground: play.tailwindcss.com

---

Conclusion

Tailwind CSS changes how you think about styling:

Before

After

Create CSS files

Style in markup

Name everything

Describe what it does

Fight specificity

Flat classes

Switch between files

Stay in one place

Unused CSS accumulates

Built-time purging

It takes about a week to feel comfortable. After that, you'll be faster than you ever were with traditional CSS.

Related guides:

• React vs Vue vs Svelte for WordPress Developers

• WordPress to Next.js Migration Guide

• JAMstack Explained for WordPress Users

Learn more about modern development →