cippaciong

Home | Blog | About

Pragmatic Landing Pages with Tailwind

2025-10-15

A few weeks ago I was building a landing page for a product that I'm currently working on in my free time and I was doing that using just a plain index.html with some CSS here and there using Tailwind.

If you visit Tailwind's documentation, you'll notice the default installation method they suggest goes through a build system like Vite. This approach though, doesn't work well for a minimal single-file landing page. It can easily distract you from your main goal which should be crafting the best landing page possible to intrigue your visitors, who couldn't care less how you installed Tailwind.

Let's see then what are the options to create a Tailwind based landing page with minimal effort and maximum results

(By the way, if you don't know where to start building a landing page,I couldn't recommend this article more)

Tailwind CSS Play CDN

I know this sounds controversial, but I think your first iteration of the landing page should just import Tailwind from their CDN. And by "first iteration" I mean the first public version you put in users' hands.

They call it the Play CDN and on their website they warn it's intended for testing, but CDNs like this have been used for over 20 years (and remain common) to deliver CSS and JS for websites far more critical than the landing page you're building.

You might not get a perfect Lighthouse score because you're not pruning unused styles. And yet, most users won't notice it because the full CSS is just 256 KB. A proper setup could shrink that by as much as 90%, but still, 256 KB, come on.

Host the CSS yourself

If for any reason you don't trust the CDN, another option is to download the compiled CSS and host it alongside your site assets. If you can serve your website, you can serve the CSS. I don't see a big advantage to doing that over the CDN, nor any major downside.

Use their CLI

If you really don't like the CDN approach you can use the Tailwind CLI to process your main.css file into a compiled version that you ship with your site. Here's what I mean by a minimal setup:

npm init
npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i main.css -o public/main.css --watch

That's it.

Stop here

Seriously: if you're thinking about a more complex setup and your landing page isn't public yet, stop. Arguably, the Tailwind CLI approach is already too complex. Focus on creating great content for your users, finding the right channels to promote the page, and crafting a compelling call to action.

Every hour you spend chasing the perfect setup is time you're not spending on the things that really matter.

Maybe in the future your needs will change and you'll require a more complex setup with a build system or a static site generator. Until then, stop tinkering with the tech stack. Focus on the content, publish, iterate, and have fun.

P.S. If you're curious about my landing, you can find it here
Feel free to roast me on X or BlueSky