Click here to Skip to main content
15,797,822 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am working with TailwindCSS. It has a JS script to find in your HTML file the TailwindCSS used and inject into a "style" tag of the HTML file.

<html><br />
  <head><br />
    <script src=""></script><br />
  </head><br />
  <body><br />
    <div id="loading" class=" flex h-screen"><br />
      <div class="m-auto"><br />
        <button class="btn rounded-full bg-red-700 p-5 text-white"><br />
          A red pill<br />
        </button><br />
      </div><br />
    </div><br />
  </body><br />
</html><br />

Here a simple example:

Can see the code to see the injected by the Tailwind .js

Exists any vanilla JS tool to extract the classes used in a .css file of a HTML and inject into a "style" tag? It is for work in development and remove the .css file in production.

Note: I know libraries like "UnCss" or "PurgeCss" but it needs a Node.js server installed

Thank you

What I have tried:

In base a full.css file, generate a new css code with only the used classes. With vanila JS.
Member 15627495 6-Jun-23 2:29am    
as CSS are read and apply 'sequential', you do not need to locate a css field descriptor, then add one parameters.
you can put it at end of one file css, it will works !

the CSS need a accurate 'selector' , nothing else.

to help you understand :
 background-color:blue; // apply at reading
 background-color:yellow; // apply at reading
 background-color:red; // apply at reading, then :
 // the background will be 'red', because of a 'sequential reading' of the css
 // the last value for the color is display to the user.

later in my css file, I have again the same tag :

 // the background will be purple , not red

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900