How to Use Tailwind CSS in Production

A practical guide to setting up Tailwind CSS the right way for optimized performance and maintainability.

Why Not Use the CDN in Production?

While cdn.tailwindcss.com is great for prototyping and quick mockups, it should never be used in a production environment. Here's why:

  • Performance: It loads the entire framework, even unused classes.
  • Customization: You can't extend or configure themes via tailwind.config.js.
  • Security: You're relying on an external source at runtime.
  • No Purging: Unused styles are not removed, leading to bloated CSS.

Installing Tailwind CSS Locally

To set up Tailwind CSS for production, install it using npm:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
//if couldn't run the above command use the below item
npx tailwindcss-cli@latest init

This creates a tailwind.config.js file which you'll use to define your content sources and custom settings.

Set Up Your CSS File

Create a file like src/styles.css and include the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure Tailwind

Update tailwind.config.js with your content paths to enable purging:

module.exports = {
  content: ['./src/**/*.{html,js,vue,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Build & Minify Tailwind CSS

Use the Tailwind CLI to generate a minified production CSS file:

npx tailwindcss -i ./src/styles.css -o ./dist/output.css --minify
//if couldn't run the above command use the below item
npx tailwindcss-cli@latest -i ./src/styles.css -o ./dist/output.css --minify

This command will generate a small, optimized CSS file that includes only the styles you used. check the dist folder which contains the minified css file.

Add a Build Script

You can automate this with an npm script. In package.json, add:

"scripts": {
  "build:css": "npx tailwindcss -i ./src/styles.css -o ./dist/output.css --minify"
}

Conclusion

For best performance, flexibility, and long-term maintainability, always install Tailwind CSS via npm and compile it with the CLI or your bundler. Avoid using the CDN in production — it's great for learning, but not for shipping!