Tailwind CSS For Non-Designers

It has happened. I have recently gotten what Tailwind CSS is about. Working with it has become a breeze, instead of copying code and hoping for the best.

Don’t get me wrong - I don’t have a complete grasp of it, nor did I dive into more advanced topics yet! However, I feel confident to have generated enough understanding to code up almost any project I want with it.

If you are a backend developer approaching Tailwind CSS (or a fellow ops-kin curious about giving it a try), you have come to the right place!

Very First Steps

If you just want to try adding some styling to the most simple website, you can start by working on a single html file.

Yes, you read that right. No, you will not need to work with node modules yet (although that will change as soon as you notice the size of your assets…).

To get started, you’ll have the best experience following the instructions in the Tailwind CSS docs via CDN. It’s a single line. No need to install anything on your machine. The core is a <script> tag, which loads js code, which in turn takes care of everything else.

There are downsides to this approach! The CSS file being loaded is quite large (for frontend stuff at least). The size is enough to negatively impact your load speed on a live site. This approach is only viable for quick-start and development purposes.

With the CDN approach, you are not too limited. You can even add plugins, and try changing Tailwind configuration variables as well.

However, to really enjoy developing with Tailwind CSS, the right environment is key.

The Right Environment

While you can use the CDN version, you will not get to enjoy the conveniences of frontend development tooling. I am talking about things like:

• Components
• Auto-reload
• TypeScript typecheck and linting warnings

Starting a new site, I would go with a component-based frontend framework like Nuxt.js (Vue3) or Next.js (React). There are others I’m sure, but those have been quite enjoyable for me when it comes to content sites.

Honorable mentions: Hugo (powering this site), Zola (with a Django-esque templating language). To my knowledge, they don’t offer a convenient auto-reload and out-of-the-box tooling for Tailwind CSS though.

For Nuxt, you can get Tailwind CSS to be functional by installing a single module. The tooling around Nuxt will make sure that the final CSS is as small as it can be, and everything just works.

If you want to use Tailwind CSS with your framework of choice (like for Django <3), make sure to take some time and setup a good development environment. You really want auto-reload functionality, even to experience it once. It’s magical when you change your template and the page shows your changes instantaneously.

The same goes for your editor. If you use vscode, make sure that a linter and typescript (or Vue/React sensible) checker are working well. If will improve your iteration speed by a lot. Don’t forget to configure auto-closing tags!

Did I Mention Components

You don’t want to repeat yourself, especially with all those Tailwind CSS classes you will be adding around.

I think that working with a framework that supports components (like in Vue or React), is really important to enjoy the experience. Otherwise, you’ll be fighting inconsistencies and won’t be having a good time.

If you are using Django, you could use the components plugin or work with includes for partial templates. Or use partials, as is the way to go with something like Hugo. Having a bucket of reusable ready-to-go components is quite essential for my own flow at least.

Markup, Mobile, Desktop

Setting the right scope from the beginning will make a difference to your development experience. Except if you don’t want your site to be responsive and look good on mobile - you do you.

However, if you want people to be able to view the page on their Android-iPhones, starting with small screens is key. Your markup will be the first step. You will maybe need to adjust some nestings when it comes to styling - can’t get around an extra <div> or <span> here or there.

Then, and this is really crucial, start by styling your page for a mobile-friendly width first. Your browser window will be really slim from side to side, looking like a smartphone. This is the way.

Here is the reason: the Tailwind CSS classes you add without a breakpoint qualifier can be overruled or extended for larger screen. This works by specifying what needs to happen starting from a certain minimum width.

Here is what I mean, in a completely fabricated example:

<div class="p-5 md:p-3 lg:p-2">

The class p-5 is applied to all screens. BUT! If the screen is at least medium-sized (md:) p-3 will be applied to this element as well (and will override the previous one). The same goes for larger screens with lg:

So, start by styling your site for small screens. Once you are done, make the browser window wider (until the site starts looking bad) and add some rules for the right size of screen so it looks good. Continue until the browser is full-screen on a large display.

You can read more in the Tailwind CSS docs.

Think “Flex”

If you are new to CSS, you are lucky. Laying out elements in the past was a pain.

This point is less Tailwind CSS focused, and more of a general thing.

If you don’t need to make sure that your site will look good on really old browsers (so sorry if this assumption is wrong. I really am.), just go for Flexbox and Flexgrid from the beginning.

If you don’t know what thos are, the guide by css-tricks has everything you need to get started. I still consult it for every layout I build.

You probably won’t need Flexgrid for your thing to be honest. Most layouts can be achieved using, sometimes nested, Flexbox elements.

Here is an example to get you started:

<div class="flex flex-col gap-4">
    <div class="p-5">this</div>
    <div class="p-5">is</div>
    <div class="p-5">a</div>
    <div class="p-5">test</div>
</div>

This should (I have not tested it) lay out the inner div elements one after the other (because of flex-col) and put gaps between them. The inner div elements have some padding, through p-5, for no relevant reason.

A Basic Layout

Here is one last thing to get you started. Let’s say you want to lay out a classical website, with a header, main part and a footer. Here is how the markup + Tailwind CSS classes would look like:

<body>
    <div class="flex flex-col min-h-screen">
        <div class="bg-red-500 text-white text-center pt-10 px-3">
            <h2 class="text-5xl font-bold"><a href="#">Your Site</a></h2>
        </div>
        <div class="grow px-4 pb-8 pt-7 m-auto max-width">
            Main
        </div>
        <div class="bg-red-500 text-white text-center pt-9">
            Footer
        </div>
    </div>
</body>

I left out the outer <html> tags and everything that goes into the <head>.

Here are the most important parts to know about:

• flex and flex-col on the outer element make sure that the inner divs are below each other.
• min-h-screen makes sure that the div around the content of your site is at least the size of your screen.
• The grow class on the main div is for making sure that this is the element that takes up all unused space of the parent, if there is any. This way, your footer will be where it should be.
• Finally, there is a bunch of text centering (text-center), red background color (bg-red-) and text colors (text-) as well as padding (pt, px). The main section has got a maximum width and automatic margins (m-auto) so eventual text inside it is not one long line on big screens.

You can read up all about those classes in the Tailwind CSS docs! Here is the entry on text colors for example. You can find everything else by scrolling on the left, or by using the quick search bar.

I find example Tailwind CSS components to be very overwhelming, as they usually have dozens of classes and it’s really hard to see what’s going on as a newcomer. But you will grow into it when you start working with it, don’t worry!

Final Words

I hope that this writeup has been helpful to you! I have been trying to get Tailwind CSS a few times over the past years, and it only clicked recently - when I found out what basic classes I need to create a simple layout and that starting with a mobile design is the way to go.

I hope this overview will be helpful for you, to approach this way of styling websites without bumping into the learning curve and giving up.

Oh, one more thing. You will want to add the prose class around the place where you have text which is supposed to look like well-styled text. This way, you won’t have to fiddle with every single <h2> or <p>.