Convert TailwindCSS to Native CSS

How to Convert TailwindCSS Classes to Native CSS

If you have an HTML file styled with TailwindCSS and need to convert it to native CSS, the process can be daunting, especially for large projects. This guide will walk you through tools and approaches to make the conversion easier and more efficient.

Problem

TailwindCSS uses utility classes for styling, which are not directly transferable to native CSS. Manually extracting and converting classes for a large project can take hours. An automated solution is ideal to streamline the process.

Solution 1: Use Tailwind Play to Extract CSS

Tailwind Play is an online tool provided by TailwindCSS to preview your code and extract generated CSS.

Steps:

1. Paste your HTML code into the editor.
2. Navigate to the "Generated CSS" tab.
3. Copy the CSS provided.

Example:

<div class="text-center text-[2rem] font-bold text-red-500 lg:text-left lg:text-[4rem]">
  Hello, World!
</div>

The generated CSS would look like this:

.text-center {
  text-align: center;
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.font-bold {
  font-weight: 700;
}
.text-[2rem] {
  font-size: 2rem;
}
@media (min-width: 1024px) {
  .lg\:text-[4rem] {
    font-size: 4rem;
  }
  .lg\:text-left {
    text-align: left;
  }
}

Pros:

• Easy and quick for small projects.
• Requires no setup.

Cons:

• Manual copy-pasting is required for large files.
• Limited automation.

Solution 2: Use an Online Tool (Tailwind to CSS)

You can also use an online converter like Tailwind to CSS for a more automated process.

Steps:

1. Paste your HTML file's content into the converter.
2. The tool will output the corresponding CSS.

Limitations:

• Some custom classes like hover: or min-h-[150px] might not be fully supported.
• Requires manual adjustments for advanced use cases.

Solution 3: Automate with PostCSS and TailwindCSS

For larger projects or repetitive tasks, using a PostCSS script with TailwindCSS is the best option. This approach automates the generation of native CSS from Tailwind classes in your HTML.

Setup Instructions:

1. Install Dependencies:

   npm install postcss tailwindcss
   

2. Create a tailwind.config.js File:

   // tailwind.config.js
   module.exports = {
     content: ['./src/**/*.{js,ts,vue}', './index.html'],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

3. Create a Conversion Script:

   // convert-tailwind-to-css.js
   import { fileURLToPath } from 'url'
   import { dirname, resolve } from 'path'
   import fs from 'fs'
   import postcss from 'postcss'
   import tailwindcss from 'tailwindcss'
   
   const outputCSS = './output.css'
   
   postcss([tailwindcss(resolve(dirname(fileURLToPath(import.meta.url)), './tailwind.config.js'))])
     .process('@tailwind utilities; @tailwind components;', { from: undefined })
     .then((result) => {
       fs.writeFileSync(outputCSS, result.css, 'utf8')
       console.log(`Native CSS generated: ${outputCSS}`)
     })
     .catch((err) => console.error('An error occurred:', err))
   

4. Run the Script:

   node convert-tailwind-to-css.js
   

This will generate a file output.css containing all the native CSS extracted from your Tailwind classes.

Advantages:

• Fully automated.
• Handles large projects efficiently.

Drawbacks:

• Requires some setup and knowledge of Node.js.

FAQs

1. Why would I convert TailwindCSS to native CSS?

You may need to convert TailwindCSS to native CSS for legacy projects, better browser compatibility, or to work with teams unfamiliar with Tailwind.

2. Can Tailwind's utility-first approach be fully replicated in native CSS?

While you can replicate styles, Tailwind's utility classes offer unique advantages like composability and maintainability, which are harder to achieve in plain CSS.

3. Is there a fully automated tool for Tailwind to CSS conversion?

Tools like PostCSS and custom scripts provide automation, but fully online tools often require some manual intervention.