CSS · CSS Tools & Workflow

PostCSS

Transform and enhance your CSS with JavaScript plugins

Find videos you like?

Save to resource drawer for future reference!

What is PostCSS?

A tool that transforms CSS using JavaScript plugins - like Babel for CSS

Not a preprocessor - it's a CSS transformer

Uses plugins to add features to CSS

Autoprefixer, minification, and more

Works with regular CSS

Used by major frameworks (Tailwind, Bootstrap)

Faster and more flexible than Sass/Less

PostCSS in Simple Terms

Think of PostCSS as a factory assembly line for CSS. You write regular CSS, and PostCSS plugins process it to add features, optimize it, and make it better. Each plugin does one job well - add vendor prefixes, minify, convert future CSS to current CSS, etc.

PostCSS vs Preprocessors

How is it different?

Preprocessors (Sass/Less)

• Write in Sass/Less syntax
• Fixed set of features
• Need to learn new syntax
• All-in-one solution

PostCSS

• Write regular CSS
• Choose plugins you need
• Works with standard CSS
• Modular approach

💡 Key Difference: Sass/Less add features with new syntax. PostCSS adds features to regular CSS using plugins. You can even use them together!

How PostCSS Works

The transformation process

1️⃣ Input CSS

You write regular CSS

.box { display: flex; }

2️⃣ Parse

PostCSS reads the CSS

Converts to JavaScript AST

3️⃣ Transform

Plugins modify the CSS

Autoprefixer adds prefixes

4️⃣ Output

Final CSS is generated

.box { display: -webkit-flex; }

PostCSS Workflow

CSS

/* INPUT: Your CSS */
.box {
  display: flex;
  user-select: none;
}

/* ⬇️ PostCSS processes with plugins ⬇️ */

/* OUTPUT: Enhanced CSS */
.box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

Autoprefixer

Automatically adds vendor prefixes for browser compatibility

display: flex → display: -webkit-flex; display: flex;

cssnano

Minifies CSS for production (removes whitespace, optimizes)

Reduces file size by 50-70%

postcss-preset-env

Use future CSS features today (like Babel for CSS)

Custom properties, nesting, modern color functions

postcss-nested

Write nested CSS like Sass, but in regular CSS

.card { .title { } }

postcss-import

Inline @import rules for better performance

Combines multiple CSS files into one

Setting Up PostCSS

How to get started

Step 1: Install PostCSS

CSS

# Install PostCSS and plugins
npm install -D postcss postcss-cli autoprefixer

# Or with a config preset
npm install -D postcss postcss-preset-env

Step 2: Create postcss.config.js

CSS

// postcss.config.js
module.exports = {
  plugins: [
    // Add vendor prefixes
    require('autoprefixer'),
    
    // Use future CSS features
    require('postcss-preset-env')({
      stage: 2, // Which CSS features to polyfill
      features: {
        'nesting-rules': true
      }
    }),
    
    // Minify for production
    process.env.NODE_ENV === 'production' ? require('cssnano') : null,
  ].filter(Boolean)
};

Step 3: Use with Build Tools

CSS

// With Vite (built-in support)
// Just create postcss.config.js, Vite will use it automatically!

// With Webpack
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
};

// With Next.js (built-in)
// Just create postcss.config.js, Next.js will use it!

PostCSS Transformations

See plugins in action

Example 1: Autoprefixer

CSS

/* INPUT: Modern CSS */
.box {
  display: flex;
  user-select: none;
  backdrop-filter: blur(10px);
}

/* OUTPUT: With vendor prefixes */
.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

Example 2: postcss-nested

CSS

/* INPUT: Nested CSS (Sass-like) */
.card {
  padding: 20px;
  
  .card-title {
    font-size: 20px;
    
    &:hover {
      color: blue;
    }
  }
}

/* OUTPUT: Flat CSS */
.card {
  padding: 20px;
}

.card .card-title {
  font-size: 20px;
}

.card .card-title:hover {
  color: blue;
}

Example 3: postcss-preset-env (Future CSS)

CSS

/* INPUT: Future CSS features */
:root {
  --primary: #3b82f6;
}

.button {
  background: var(--primary);
  
  /* Nesting (future CSS) */
  &:hover {
    background: color-mod(var(--primary) alpha(90%));
  }
  
  /* Custom media queries */
  @media (--tablet) {
    padding: 16px;
  }
}

/* OUTPUT: Current CSS */
:root {
  --primary: #3b82f6;
}

.button {
  background: var(--primary);
}

.button:hover {
  background: rgba(59, 130, 246, 0.9);
}

@media (min-width: 768px) {
  .button {
    padding: 16px;
  }
}

Complete PostCSS Setup

Real-world configuration

Production-Ready postcss.config.js

CSS

// postcss.config.js
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  plugins: [
    // 1. Import CSS files
    require('postcss-import'),
    
    // 2. Enable nesting
    require('postcss-nested'),
    
    // 3. Use future CSS features
    require('postcss-preset-env')({
      stage: 2,
      features: {
        'nesting-rules': true,
        'custom-properties': true,
        'custom-media-queries': true,
      },
      autoprefixer: {
        grid: true // Enable IE grid support
      }
    }),
    
    // 4. Add vendor prefixes (included in preset-env)
    // Autoprefixer is already in postcss-preset-env
    
    // 5. Minify for production only
    isProduction && require('cssnano')({
      preset: ['default', {
        discardComments: {
          removeAll: true,
        },
        normalizeWhitespace: true,
      }]
    }),
    
    // 6. Remove unused CSS (optional)
    isProduction && require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.html', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ].filter(Boolean)
};

Why Use PostCSS?

Key advantages

✅ Advantages

✓ Write regular CSS
✓ Choose only plugins you need
✓ Fast processing (3x faster than Sass)
✓ Use future CSS features today
✓ Works with any build tool
✓ Large plugin ecosystem (200+)

⚠️ Considerations

⚠ Need to configure plugins
⚠ Learning curve for setup
⚠ Plugin compatibility to check
⚠ Build step required

When to Use PostCSS

Common scenarios

Modern Frameworks

Tailwind, Next.js use PostCSS by default

Cross-Browser

Autoprefixer for vendor prefixes

Future CSS

Use upcoming CSS features now

Optimization

Minify and optimize for production

PostCSS Best Practices

Start Simple: Begin with Autoprefixer and cssnano only
Use Preset Env: postcss-preset-env gives you most features you need
Only Load in Production: Only minify/purge CSS in production builds
Check Browser Support: Configure Autoprefixer for your target browsers
Keep Config Clean: Document why you're using each plugin
Test Build Output: Verify plugins work correctly together

PostCSS in Popular Tools

Tailwind CSS: Uses PostCSS for processing utility classes

Next.js: Built-in PostCSS support with zero config

Vite: Native PostCSS support, just add config file

Create React App: PostCSS included, can customize

Previous Topic

CSS Preprocessors

Sass, Less, PostCSS, variables, mixins, functions, and preprocessing workflows.

Next Topic

CSS-in-JS

Styled-components, Emotion, CSS Modules, and JavaScript-based styling solutions.

Ask a Question

Have a question about PostCSS? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · CSS Tools & Workflow

PostCSS

Transform and enhance your CSS with JavaScript plugins

Find videos you like?

Save to resource drawer for future reference!

What is PostCSS?

A tool that transforms CSS using JavaScript plugins - like Babel for CSS

Not a preprocessor - it's a CSS transformer

Uses plugins to add features to CSS

Autoprefixer, minification, and more

Works with regular CSS

Used by major frameworks (Tailwind, Bootstrap)

Faster and more flexible than Sass/Less

PostCSS in Simple Terms

PostCSS vs Preprocessors

How is it different?

Preprocessors (Sass/Less)

• Write in Sass/Less syntax
• Fixed set of features
• Need to learn new syntax
• All-in-one solution

PostCSS

• Write regular CSS
• Choose plugins you need
• Works with standard CSS
• Modular approach

💡 Key Difference: Sass/Less add features with new syntax. PostCSS adds features to regular CSS using plugins. You can even use them together!

How PostCSS Works

The transformation process

1️⃣ Input CSS

You write regular CSS

.box { display: flex; }

2️⃣ Parse

PostCSS reads the CSS

Converts to JavaScript AST

3️⃣ Transform

Plugins modify the CSS

Autoprefixer adds prefixes

4️⃣ Output

Final CSS is generated

.box { display: -webkit-flex; }

PostCSS Workflow

CSS

/* INPUT: Your CSS */
.box {
  display: flex;
  user-select: none;
}

/* ⬇️ PostCSS processes with plugins ⬇️ */

/* OUTPUT: Enhanced CSS */
.box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

Autoprefixer

Automatically adds vendor prefixes for browser compatibility

display: flex → display: -webkit-flex; display: flex;

cssnano

Minifies CSS for production (removes whitespace, optimizes)

Reduces file size by 50-70%

postcss-preset-env

Use future CSS features today (like Babel for CSS)

Custom properties, nesting, modern color functions

postcss-nested

Write nested CSS like Sass, but in regular CSS

.card { .title { } }

postcss-import

Inline @import rules for better performance

Combines multiple CSS files into one

Setting Up PostCSS

How to get started

Step 1: Install PostCSS

CSS

# Install PostCSS and plugins
npm install -D postcss postcss-cli autoprefixer

# Or with a config preset
npm install -D postcss postcss-preset-env

Step 2: Create postcss.config.js

CSS

// postcss.config.js
module.exports = {
  plugins: [
    // Add vendor prefixes
    require('autoprefixer'),
    
    // Use future CSS features
    require('postcss-preset-env')({
      stage: 2, // Which CSS features to polyfill
      features: {
        'nesting-rules': true
      }
    }),
    
    // Minify for production
    process.env.NODE_ENV === 'production' ? require('cssnano') : null,
  ].filter(Boolean)
};

Step 3: Use with Build Tools

CSS

// With Vite (built-in support)
// Just create postcss.config.js, Vite will use it automatically!

// With Webpack
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
};

// With Next.js (built-in)
// Just create postcss.config.js, Next.js will use it!

PostCSS Transformations

See plugins in action

Example 1: Autoprefixer

CSS

/* INPUT: Modern CSS */
.box {
  display: flex;
  user-select: none;
  backdrop-filter: blur(10px);
}

/* OUTPUT: With vendor prefixes */
.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

Example 2: postcss-nested

CSS

/* INPUT: Nested CSS (Sass-like) */
.card {
  padding: 20px;
  
  .card-title {
    font-size: 20px;
    
    &:hover {
      color: blue;
    }
  }
}

/* OUTPUT: Flat CSS */
.card {
  padding: 20px;
}

.card .card-title {
  font-size: 20px;
}

.card .card-title:hover {
  color: blue;
}

Example 3: postcss-preset-env (Future CSS)

CSS

/* INPUT: Future CSS features */
:root {
  --primary: #3b82f6;
}

.button {
  background: var(--primary);
  
  /* Nesting (future CSS) */
  &:hover {
    background: color-mod(var(--primary) alpha(90%));
  }
  
  /* Custom media queries */
  @media (--tablet) {
    padding: 16px;
  }
}

/* OUTPUT: Current CSS */
:root {
  --primary: #3b82f6;
}

.button {
  background: var(--primary);
}

.button:hover {
  background: rgba(59, 130, 246, 0.9);
}

@media (min-width: 768px) {
  .button {
    padding: 16px;
  }
}

Complete PostCSS Setup

Real-world configuration

Production-Ready postcss.config.js

CSS

// postcss.config.js
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  plugins: [
    // 1. Import CSS files
    require('postcss-import'),
    
    // 2. Enable nesting
    require('postcss-nested'),
    
    // 3. Use future CSS features
    require('postcss-preset-env')({
      stage: 2,
      features: {
        'nesting-rules': true,
        'custom-properties': true,
        'custom-media-queries': true,
      },
      autoprefixer: {
        grid: true // Enable IE grid support
      }
    }),
    
    // 4. Add vendor prefixes (included in preset-env)
    // Autoprefixer is already in postcss-preset-env
    
    // 5. Minify for production only
    isProduction && require('cssnano')({
      preset: ['default', {
        discardComments: {
          removeAll: true,
        },
        normalizeWhitespace: true,
      }]
    }),
    
    // 6. Remove unused CSS (optional)
    isProduction && require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.html', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ].filter(Boolean)
};

Why Use PostCSS?

Key advantages

✅ Advantages

✓ Write regular CSS
✓ Choose only plugins you need
✓ Fast processing (3x faster than Sass)
✓ Use future CSS features today
✓ Works with any build tool
✓ Large plugin ecosystem (200+)

⚠️ Considerations

⚠ Need to configure plugins
⚠ Learning curve for setup
⚠ Plugin compatibility to check
⚠ Build step required

When to Use PostCSS

Common scenarios

Modern Frameworks

Tailwind, Next.js use PostCSS by default

Cross-Browser

Autoprefixer for vendor prefixes

Future CSS

Use upcoming CSS features now

Optimization

Minify and optimize for production

PostCSS Best Practices

Start Simple: Begin with Autoprefixer and cssnano only
Use Preset Env: postcss-preset-env gives you most features you need
Only Load in Production: Only minify/purge CSS in production builds
Check Browser Support: Configure Autoprefixer for your target browsers
Keep Config Clean: Document why you're using each plugin
Test Build Output: Verify plugins work correctly together

PostCSS in Popular Tools

Tailwind CSS: Uses PostCSS for processing utility classes

Next.js: Built-in PostCSS support with zero config

Vite: Native PostCSS support, just add config file

Create React App: PostCSS included, can customize

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

CSS Preprocessors

CSS-in-JS

Building Your Learning Module...

PostCSS

PostCSS in Simple Terms

Preprocessors (Sass/Less)

PostCSS

1️⃣ Input CSS

2️⃣ Parse

3️⃣ Transform

4️⃣ Output

PostCSS Workflow

Autoprefixer

cssnano

postcss-preset-env

postcss-nested

postcss-import

Step 1: Install PostCSS

Step 2: Create postcss.config.js

Step 3: Use with Build Tools

Example 1: Autoprefixer

Example 2: postcss-nested

Example 3: postcss-preset-env (Future CSS)

Production-Ready postcss.config.js

✅ Advantages

⚠️ Considerations

Modern Frameworks

Cross-Browser

Future CSS

Optimization

PostCSS Best Practices

PostCSS in Popular Tools

CSS Preprocessors

CSS-in-JS

PostCSS

PostCSS in Simple Terms

Preprocessors (Sass/Less)

PostCSS

1️⃣ Input CSS

2️⃣ Parse

3️⃣ Transform

4️⃣ Output

PostCSS Workflow

Autoprefixer

cssnano

postcss-preset-env

postcss-nested

postcss-import

Step 1: Install PostCSS

Step 2: Create postcss.config.js

Step 3: Use with Build Tools

Example 1: Autoprefixer

Example 2: postcss-nested

Example 3: postcss-preset-env (Future CSS)

Production-Ready postcss.config.js

✅ Advantages

⚠️ Considerations

Modern Frameworks

Cross-Browser

Future CSS

Optimization

PostCSS Best Practices

PostCSS in Popular Tools