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:
<!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 😉