CODEWITHSUNDEEP
csstailwind-css
Matthew Verstraete
Matthew Verstraete

Reputation: 6781

Convert TailwindCSS to native CSS?

I have been given an html file that is written using TailwindCSS and I am trying to figure out how to convert all there stuff to native CSS.

I have found a convert that will just do the class but that requires me to extract thousands of classes from the code manually and then repast it. Is there some tool where I can just upload the whole html file and it spit out a CSS version of it for me or do I have to manually do this whole conversion?

I would prefer something online as I don't want to go though having to install a bunch of 3rd party tools, learning there system, do the convert, and then uninstall everything.

Upvotes: 12

Views: 16718

Answers (3)

rozsazoltan
rozsazoltan

Reputation: 7021

Solution with Tailwind CSS v3

I see that only online tools are available. I created a PostCSS script that generates the required output.css from TailwindCSS without needing any input.css. For my example, I used the following index.html:

<!-- index.html -->

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

Since we will be using PostCSS and TailwindCSS, let's install them in the root of the project.

npm install postcss tailwindcss

Create your own tailwind.config.js and customize it.

// tailwind.config.js

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

And let's create our convert-tailwind-to-css.js file, in which PostCSS will generate our file output.css based on the TailwindCSS properties.

By default, this would be generated with 4 spaces, but I integrated a feature that allows you to replace it with any number of spaces (in my case: 2). Of course, if you plan to minify it later, this could be considered an unnecessary step.

// 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';

// Generated CSS indent spaces count
const indentSpaces = 2;
// Generated CSS output file
const outputCSS = './output.css';

// Load tailwind.config.js
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const configPath = resolve(__dirname, './tailwind.config.js');

// Convert Tailwind CSS to native CSS
postcss([ 
  tailwindcss(configPath),
])
  .process('@tailwind utilities; @tailwind components;', { from: undefined })
  .then((result) => {
    // Format and write the CSS output
    const formattedCSS = result.css
      .replaceAll(' '.repeat(4), ' '.repeat(indentSpaces)) // Handle indentation
      .replace(/([^{;\s]+:[^;}]+)(\s*?)\n(\s*})/g, '$1;\n$3'); // Insert semicolon before newline and closing brace, preserving indentation
      
    fs.writeFileSync(outputCSS, formattedCSS, 'utf8');
    console.log(`Native CSS generated: ${outputCSS}`);
  })
  .catch((err) => console.error('An error occurred:', err));

node convert-tailwind-to-css.js

Why?

The solution aligns with the premise of the question:

  • It requires minimal extra knowledge (in fact, if you copy the JavaScript code, install the 2 dependencies, and run the command, it will do its job)
  • You don't need to create your own input.css or add extra classes
  • It's easily configurable through the TailwindCSS Docs, in the default tailwind.config.js
  • Unlike all online solutions, this can be automated and requires minimal manual effort

The expected result with my solution:

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

Upvotes: 1

krishnaacharyaa
krishnaacharyaa

Reputation: 24912

Paste your html code in tailwind-playground

You can access the css in the generated css files tab.

Example

enter image description here

According to tailwind-css docs

Tailwind automatically injects these styles when you include @tailwind base in your CSS (the first 552 lines of generated css)

You can remove those base classes by setting preflight = false in tailwind.config.cs

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

Upvotes: 11

Foysal imran
Foysal imran

Reputation: 133

You may use this tool: https://tailwind-to-css.vercel.app/ for converting the tailwind CSS class to normal CSS.

Upvotes: 3

Related Questions