Tailwind CSS is a good choice for a marketing website when the site is built from code components, in Next.js or React, and developers ship the pages. It keeps styling consistent across a growing number of pages and ships only the CSS you use. It is a poor choice when non-developers need to build layouts themselves, where a visual page builder serves them better.
I use Tailwind on the sites I build in code. procol.ai runs on Next.js, TypeScript and Tailwind CSS, and so does this portfolio, on TanStack Start. On WordPress client sites I use Bricks, Elementor or Oxygen instead. The deciding question is always who builds the next page.
What does Tailwind CSS actually do?
Tailwind is a utility-first CSS framework. Instead of writing a class like .hero-title and its rules in a separate stylesheet, you compose small single-purpose classes in the markup: text-4xl font-semibold tracking-tight. A build step scans your files and generates only the classes you used.
For a marketing site, that has three practical effects:
- No stylesheet that grows forever. Old CSS for deleted sections does not linger, because unused classes are never generated.
- One set of design tokens. Colours, font sizes and spacing come from the theme, so a developer cannot quietly invent a new shade of blue.
- Styles live with the component. When you move or delete a section, its styling goes with it.
When is Tailwind the right choice for a marketing site?
When three things are true: the site is built in code, the team ships new pages often, and you want those pages to look like one brand.
That was the case at Procol. The old site was a WordPress install built with Bricks Builder, and each campaign waited on a developer to wrestle the builder. On the Next.js rebuild, Tailwind kept styling consistent without a theme layer that someone has to maintain. I wrote a component library the team now uses to assemble new pages, so a landing page is a matter of composing tested sections rather than starting from a blank canvas.
The Procol Nexus 2026 event page shows the same benefit. It had to feel like a premiere, with a full-screen video hero and scroll-linked motion, yet it reused the design system of the main site. Tailwind tokens gave it the brand for free, and the custom parts stayed small.
When is a page builder better than Tailwind?
When the people running the site need to build or rearrange layouts without a developer. That describes most of my WordPress clients: hotels, restaurants, venues and service firms whose teams update pages themselves.
| Situation | Better fit | Why |
|---|---|---|
| Developers ship every page, brand consistency matters | Tailwind in Next.js or React | Shared tokens and components, small CSS |
| Marketing team builds pages from approved sections | Tailwind plus a component library | Developers build sections once, marketers compose them |
| Client edits layouts visually after launch | Bricks, Elementor or Oxygen on WordPress | Visual editing without touching code |
| One-off page needed by tomorrow on an existing WordPress site | The site's existing builder | No new tooling for a single page |
For example, Blenzy came with a complete Figma design and needed to run the site themselves, so I built it in Elementor with custom CSS where the builder fell short. Tailwind would have made the build tidier and the handover worse. For a fuller comparison of the builders, see Bricks vs Elementor vs Oxygen.
How do I set up Tailwind for a marketing site?
The order matters. Tokens first, then components, then pages.
- 1
Move the brand into the theme
Brand colours, font families, the type scale, spacing and radii go into the Tailwind theme before any page is built. If it is not a token, it does not ship.
- 2
Build primitives
Buttons, headings, containers, cards and form fields, each with a small, typed set of variants.
- 3
Build sections from primitives
Hero, logo strip, feature grid, testimonials, pricing, FAQ and call to action. These are what marketers think in.
- 4
Compose pages from sections
A new landing page is a list of sections with content. No new CSS for routine pages.
- 5
Check performance on mobile
Tailwind keeps CSS small, but images, fonts and scripts still decide speed. Test on a real phone before launch.
On this portfolio, the type pairing is part of the theme too: Syne for headings and Satoshi for body text, both self-hosted. Every page and every tool page picks them up from the same place.
Does Tailwind help with page speed?
It helps a little and costs nothing. Because Tailwind generates only the classes in use, the stylesheet stays small even as the number of pages grows. That said, CSS is rarely what makes a marketing site slow. In my experience the heavy items are hero images and video, web fonts and third-party scripts such as chat widgets and trackers.
On the Nexus page, the full-screen video hero was the heaviest asset, so I treated it as progressive enhancement: the page stays usable while the video loads. That decision mattered far more for speed than any CSS choice. My technical SEO checklist for Next.js covers the rest of the speed work.
What are the common mistakes with Tailwind on marketing sites?
Do not copy class strings between pages
The most common Tailwind mess is a long list of classes pasted into ten pages, then edited in six of them. Put the pattern in a component once, and reuse the component.
Other mistakes I see:
- Arbitrary values everywhere. A value in square brackets is fine once. Twenty of them means a token is missing from the theme.
- No component library. Without one, every new page is a fresh build, which removes most of the benefit.
- Skipping the content model. Marketers still need somewhere to edit copy, such as a CMS, markdown files or a headless WordPress backend.
- Treating Tailwind as a design system. It is the tool you build one with. The decisions about type, colour and spacing still have to be made, ideally in Figma first.
Should your next marketing site use Tailwind?
If it is a Next.js or React site that developers maintain, yes. If your team builds pages visually in WordPress, use the builder they know. If you are unsure which camp you are in, the free Tech Stack Advisor asks who will maintain the site and what matters most, and recommends a stack with the reasons.
I build Tailwind sites with a reusable component library through my Next.js and React websites service. Send me your design or your current site and I will tell you which approach fits.
