Web Design with Tailwind in Mind: An Efficient Marketing Site Workflow

You might see Tailwind in the title and assume this is just another developer how-to on using Tailwind. Well, it’s not. This is very specifically for my fellow UX/UI and Web Designers out there who want to do more with less and support their developers with the right balance of structure and flexibility.

So if you’re a developer and stumbled upon this article, share it with a designer colleague. If you’re a UX or Web Designer, read on…

The Goals of B2B Marketing Site Design

While they may be obvious, it's important to remember what the core goals are when coming up with the UX/UI and copywriting for your marketing site:

1. Professional and trustworthy look and feel

2. Clearly convey product value and differentiation

3. Educate visitors and drive engagement down the funnel towards conversion

4. Provide flexibility for constant design adjustments

5. Account for every device size, with mobile being the starting point

6. Achieve #1-5 quickly and within the constraints of your team

As designers, we are key components in the process to achieve these goals. However, too often we find ourselves seeking aesthetic perfection over practical business needs. In other words, while it’s #6 on that list above, designing with developers in mind to support their efficiency might as well be top of the list. Why? Because if it's not easy to implement, it will either (1) take longer than it should or (2) come out worse than you expected (and we all know what a bummer that can be!). 

Enter Tailwind.

What is Tailwind?

TailwindCSS is a style library that has exploded in popularity in recent years. This provides developers a library of sensible classes and configurations with which to style a web page, and comes with a lot of built-in behaviors (like responsiveness, automatic dark mode, and color choices for things like "prose" text).

Benefits of TailwindCSS to a Designer

These might not seem like benefits to designers, but let me list out why this matters:

1. Configurations like small, medium, and large (rather than 16px, 32px, 64px) reduce the risk of human error and therefore the chances that you'll need to come in later and pixel-push (hint: no one involved enjoys that process)

2. The popularity has given way to various community tools and plugins within Figma that allow designers to also design with variables instead of guessing whether 322 is a multiple of 4 or not... (it's not). Check out this nifty TailwindCSS design system for Figma

3. With the design(er) and the code(r) speaking the same language, the need for detailed annotations go down, the chances of miscommunication go down, and iterations can happen in a quick phone call rather than extensive documentation

4. Out-of-the-box dark mode configuration and responsive design ensure that developers don't miss these important cases (even if you've moved on to something else without covering all your bases!)

5. While it's not perfect, Figma's dev mode allows designers to think through the frames (i.e., divs) and responsiveness of the design and provide a Tailwind code export to give your developers a reasonably clean starting point instead of starting with a blank file

6. Component libraries have also sprung up to give both designers and developers a massive library of quality components built using TailwindCSS.

Benefits of TailwindUI (and other component libraries)

The real superpower of Tailwind lies in the community's (and their own) dedication to creating sleek component libraries off of their foundational CSS design system.

There are many out there in Figma's community, but because we are superfans, we'll shamelessly plug Tailwind's very own TailwindUI. If you want to really elevate your game and your speed, nothing can beat pre-built components that actually look amazing.

Starting any new web design with this tab open to find inspiration and design based on these components will not only help your marketing site look appealing, but will also shorten development (with the code examples available right in the same place) and increase the chances that you've covered all your bases for all your visitors and are giving them the most performant, appealing, and informative marketing website with the least amount of time and effort.

Marketing Section Design Example

First, find inspiration for marketing site page sections from the TailwindUI component library.

Recreate what you're looking for in your design, using the TailwindCSS variables from a community design file. Note: you can still make it your own; as long as it follows roughly the layout of the example section and that you limit your customizations to Tailwind-familiar variables, it will be a breeze for your devs.

Check Dev Mode in Figma to see where you might be using fixed pixels instead of responsive layouts with Tailwind variables. Fix those up and the export your Tailwind code by copying the code block presented in the right panel.

Copy the code block and send it over to your devs. Here's what this looks like for the above example marketing site section.

<div class="w-[1308px] h-[644px] px-14 py-40 bg-white flex-col justify-start items-center gap-20 inline-flex">
    <div class="flex-col justify-center items-center gap-6 flex">
        <div class="text-center text-slate-800 text-4xl font-extrabold font-['Inter'] leading-10">Trusted by Creators Worldwide</div>
        <div class="text-center text-slate-500 text-xl font-normal font-['Inter'] leading-7">Lorem ipsum dolor sit amet consect adipisicing possimus.</div>
    </div>
    <div class="rounded-3xl justify-start items-center gap-1 inline-flex">
        <div class="px-8 py-9 bg-slate-50 flex-col justify-center items-center gap-3 inline-flex">
            <div class="text-center text-slate-800 text-4xl font-extrabold font-['Inter'] leading-10">8,000+</div>
            <div class="text-center text-slate-500 text-xl font-normal font-['Inter'] leading-7">Creators on the platform</div>
        </div>
        <div class="px-8 py-9 bg-slate-50 flex-col justify-center items-center gap-3 inline-flex">
            <div class="text-center text-slate-800 text-4xl font-extrabold font-['Inter'] leading-10">8,000+</div>
            <div class="text-center text-slate-500 text-xl font-normal font-['Inter'] leading-7">Creators on the platform</div>
        </div>
        <div class="px-8 py-9 bg-slate-50 flex-col justify-center items-center gap-3 inline-flex">
            <div class="text-center text-slate-800 text-4xl font-extrabold font-['Inter'] leading-10">8,000+</div>
            <div class="text-center text-slate-500 text-xl font-normal font-['Inter'] leading-7">Creators on the platform</div>
        </div>
        <div class="px-8 py-9 bg-slate-50 flex-col justify-center items-center gap-3 inline-flex">
            <div class="text-center text-slate-800 text-4xl font-extrabold font-['Inter'] leading-10">8,000+</div>
            <div class="text-center text-slate-500 text-xl font-normal font-['Inter'] leading-7">Creators on the platform</div>
        </div>
    </div>
</div>

Take Aways

TailwindCSS may sound like it's just for devs, but it's not. The better we as designers can speak the same language as our devs (and design with a functional coding language in mind), the better our sites will be for it.

Tailwind and TailwindUI are amazing starting points for any project. They aren't the only CSS and UI libraries that exist, but we've really taken to them at Leed and think you might too.