Home

3 minute read

Extracting TailwindCSS from HTML

Tony Lea

Extracting TailwindCSS from HTML

I've recently run into a scenario where I want to design a one-off page using TailwindCSS with the CDN link; however, including the CDN link would mean that my page load is a heavy 3MB 🙁.

Instead of installing Tailwind with one of the recommended installation steps, I decided to use the PurgeCSS CLI to extract only the classes I need. Want to learn how you can accomplish this? Read on 😉

Page with the CDN link

Let's say for instance that I created the following page:

This is a very small page with the following markup:

<div class="w-screen h-screen bg-gray-900 flex items-center justify-center">
    <div class="max-w-sm bg-gray-700 rounded-xl text-white p-10 border-b-2 border-blue-500">
        <p class="font-bold">TailwindCSS is Freak'n Rad</p>
    </div>
</div>

It would be sad to include the full ~3MB+ Tailwind CDN link on this page if it only needs a sub-set of those classes. Instead of shipping this page with a large CDN link, I want to inline only the classes that I need. Let's do that next.

Page with inline Tailwind Classes

To extract the classes I want to use, I will first need to install the PurgeCSS CLI:

npm i -g purgecss

Next, I need to download the TailwindCSS CDN file to the same folder as my HTML file. Here is an example of how the contents of that folder would look:

 - index.html
 - tailwind.min.css

The index.html file will contain our simple HTML markup that you seen in the previous step. Here is the full contents of that file:

Checkout our latest product - the ultimate tailwindcss page creator 🚀
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My TailwindCSS Page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css">
</head>
<body>

    <div class="w-screen h-screen bg-gray-900 flex items-center justify-center">
        <div class="max-w-sm bg-gray-700 rounded-xl text-white p-10 border-b-2 border-blue-500">
            <p class="font-bold">TailwindCSS is Freak'n Rad</p>
        </div>
    </div>

</body>
</html>

Now, if we want to remove that heavy CDN link and only include the styles we need, we can navigate to our folder and run the following PurgeCSS command:

purgecss --css tailwind.min.css --content index.html --output output.css

This will create a new file output.css inside of our directory:

 - index.html
 - output.css
 - tailwind.min.css

If we open up the output.css file, we'll see that we have the classes we need for our markup: Hazah! 🕺

/*! tailwindcss v2.0.4 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}p{margin:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.bg-gray-700{--tw-bg-opacity:1;background-color:rgba(55,65,81,var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgba(17,24,39,var(--tw-bg-opacity))}.border-blue-500{--tw-border-opacity:1;border-color:rgba(59,130,246,var(--tw-border-opacity))}.rounded-xl{border-radius:.75rem}.border-b-2{border-bottom-width:2px}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.font-bold{font-weight:700}.h-screen{height:100vh}.max-w-sm{max-width:24rem}.p-10{padding:2.5rem}*{--tw-shadow:0 0 #0000}*{--tw-ring-inset:var(--tw-empty, );/*!*//*!*/--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59, 130, 246, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.w-screen{width:100vw}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{100%,75%{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}

We can include that CSS inside of a <style> tag in the head of our HTML file and our page will look the same:

We just minimized the CSS from 2.9MB to 2k, that's a 1,000+ times smaller than the CDN link 🤯

Conclusion

Now, we can use Tailwind inside of any one-off page and we don't have to worry about building a new NPM package or including the large CDN link in our page.

I hope this helps you out if you are looking to do a one-off page and you want to use the awesomeness of Tailwind 😉