Skip to content
intermediate Phase 57 · Modern Frontend

Tailwind CSS in Magento

Using Tailwind CSS in Magento 2: configuration, purging, utility classes, and customization

45m
0 problems
Topic Progress 0%

Tailwind Configuration

tailwind.config.js

module.exports = {
    content: [
        './**/*.phtml',
        './Magento_*/**/*.phtml',
        './web/js/**/*.js'
    ],
    theme: {
        extend: {
            colors: {
                primary: '#ff6600',
                secondary: '#333333'
            },
            fontFamily: {
                sans: ['Open Sans', 'sans-serif']
            }
        }
    },
    plugins: []
};

CSS Entry Point

/* web/src/css/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Vite Configuration

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        outDir: '../pub/static',
        manifest: true
    },
    css: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer')
            ]
        }
    }
});

Build Commands

# Development
npm run dev

# Production build
npm run build

# Watch mode
npm run watch

Purging and Optimization

What is Purging?

Tailwind removes unused CSS classes to reduce file size.

Purge Configuration

// tailwind.config.js
module.exports = {
    content: [
        './**/*.phtml',
        './Magento_*/templates/**/*.phtml',
        './web/js/**/*.js'
    ],
    // Don't purge these
    safelist: [
        'text-red-500',
        'bg-blue-*'
    ]
};

Purge Patterns

content: [
    // All phtml files
    './**/*.phtml',
    
    // Specific modules
    './Magento_Catalog/**/*.phtml',
    './Magento_Checkout/**/*.phtml',
    
    // JavaScript files
    './web/js/**/*.js',
    
    // Exclude vendor
    '!./vendor/**/*.phtml'
]

Build Size Comparison

Without purging: 3MB+
With purging: 10-30KB

Optimization Tips

  • Only include relevant file patterns
  • Use safelist for dynamic classes
  • Test after purging to ensure styles work

Utility Classes

Layout Classes

<!-- Flexbox -->
<div class="flex items-center justify-between">
    <span>Left</span>
    <span>Right</span>
</div>

<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Spacing Classes

<!-- Padding -->
<div class="p-4">1rem all sides</div>
<div class="px-4 py-2">horizontal 1rem, vertical 0.5rem</div>

<!-- Margin -->
<div class="m-4">1rem all sides</div>
<div class="mx-auto">center horizontally</div>

Typography Classes

<h1 class="text-2xl font-bold text-gray-800">Title</h1>
<p class="text-sm text-gray-600">Subtitle</p>
<a class="text-blue-500 hover:text-blue-700">Link</a>

Component Patterns

<!-- Button -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Click Me
</button>

<!-- Card -->
<div class="border rounded-lg p-4 shadow-sm">
    <h3 class="font-bold">Card Title</h3>
    <p class="text-gray-600">Card content</p>
</div>

<!-- Input -->
<input class="border rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500">

Customization

Custom Colors

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            colors: {
                'brand': '#ff6600',
                'brand-dark': '#cc5200',
                'brand-light': '#ff8533'
            }
        }
    }
};

Custom Spacing

module.exports = {
    theme: {
        extend: {
            spacing: {
                '18': '4.5rem',
                '88': '22rem'
            }
        }
    }
};

Custom Components

/* web/src/css/input.css */
@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
    }
    
    .card {
        @apply border rounded-lg p-4 shadow-sm;
    }
    
    .input-field {
        @apply border rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500;
    }
}

Use Custom Components

<button class="btn-primary">Styled Button</button>
<div class="card">Styled Card</div>
<input class="input-field" type="text">

Responsive Design

<!-- Mobile first -->
<div class="text-sm md:text-base lg:text-lg">
    Responsive text
</div>

<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    Responsive grid
</div>

Quiz

1. What is Tailwind CSS purging?

Question 1 options

2. Which file configures Tailwind?

Question 2 options

3. What class creates a flex container?

Question 3 options

Flashcards

Question

What is Tailwind CSS?

Click to reveal answer

Answer

A utility-first CSS framework for rapid UI development

Question

How do you purge unused CSS?

Click to reveal answer

Answer

Configure content paths in tailwind.config.js

Question

What class centers content horizontally?

Click to reveal answer

Answer

mx-auto

Question

How do you add custom colors?

Click to reveal answer

Answer

Extend theme.colors in tailwind.config.js

Question

What is the @apply directive?

Click to reveal answer

Answer

Applies Tailwind utility classes in custom CSS

Revision Notes

Key Takeaways

  • 1. Tailwind uses utility classes for rapid development
  • 2. Purging removes unused CSS to reduce file size
  • 3. Configure purging via content paths in config
  • 4. Custom components use @apply directive
  • 5. Responsive design uses breakpoint prefixes

Interview Tips

  • • Explain Tailwind's utility-first approach
  • • Know how purging works and why it's important
  • • Discuss when to use custom components vs utilities
  • • Be ready to configure Tailwind for Magento

Cheat Sheet

Tailwind Config:
  content: ['./**/*.phtml']
  theme.extend.colors.brand: '#ff6600'

Utilities:
  Flex: flex items-center justify-between
  Grid: grid grid-cols-3 gap-4
  Spacing: p-4 m-2 px-4 py-2
  Text: text-lg font-bold text-gray-800

Custom:
  @apply px-4 py-2 bg-blue-500;