Community Post

Introducing TailwindCSS

Ezeugwu Paschal

As a fullstack developer, I've come to the conclusion that front end development is "harder" than building a bomb.

YES! You read that right.

When I say "harder", i don't mean harder like in terms of technicality but due to the fact that you have to know a lot of things and be up-to-date at every point in time else you'll be left behind. A wise man once said and I quote:

I prefer spending weeks solving an 'unsolvable' problem at the backend side than struggling to connect the dots on the frontend.

Guess what? I was the wise man :). Do you know why we don't give up, it's because the frontend challenges your expertise and makes you better at what you do.

Now to the business of the day, TailwindCSS .

We must have worked with CSS frameworks like Bootstrap, Foundation etc during our early days or even up till now, but at a point in your career when you finally know your way around Web development you just feel like you're tired of using bootstrap, tired of loading ~300Kb of file when all you need is responsive grids or the buttons or maybe responsive navigations, tired of building Web applications that look the same and when you want a little difference, you have to manually override tons of styles just so you get something different, hectic yeah? I felt so too.

What is Tailwind

From their original documentation:

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

The beauty about this thing called tailwind is it doesn't impose design specification or how your site should look like, you simply bring tiny components together to construct a user interface that are unique.

What Tailwind simply does is take a 'raw' css file, processes this css file over a configuration file and produces an output. That's all.

Talk is cheap, practicing is better so let's begin. First, create a root directory for your project and cd into it. For users who don't understand cd, I simply mean change to the directory, Windows users should use the equivalent available in your OS. By the way you should be familiar with your command-line already to proceed.

After you've created the directory and you're in it, it's time to install.

Installing Tailwind

Tailwind is available on npm, so to install just run this from your command-line.

Using npm

npm install tailwindcss --save-dev

Using Yarn

yarn add tailwindcss --dev

Setting things up

Create a simple index.html file

<!DOCTYPE html>
<html>
    <head>
        <title>Tailwind CSS</title>
        <link rel="stylesheet" href="output.css" />
    </head>
    <body>
        <!-- Magic starts here -->

        <!-- ./End of Magic -->
    </body>
</html>

Next we need to initialize a bunch of configuration objects for Tailwind, in the root directory, run the command below. Tailwind recommends using tailwind.js as the [filename] so replace that below.

./node_modules/.bin/tailwind init [filename]

The configuration file will be created, go ahead and open it with your favorite editor, you'll notice it's just a simple JS objects file that defines your UI, you can see settings for colors, buttons, spacings and a whole lot more. Here is a snapshot

Using Tailwind

In our root directory, create an empty css file styles.css. Tailwind provides us with a directive @tailwind for including cool stuffs like Normalize.css (You should know what this is, if not look it up) and some base styles and also utilities generated from our config file.

Open your styles.css file and add the below code. Don't worry if you don't understand what is going on for now, just ride with the wave.

@tailwind preflight;

@tailwind utilities;

For a little spinoff, run the command below

./node_modules/.bin/tailwind build styles.css -o output.css

Tailwind takes in styles.css as our input, using our configuration objects file [tailwind.js], it produces an output.css file just as we specified above. Lets take a sneakpeak at our output.css file.

You can see that output.css contains a bunch of css file that was generated by tailwind. That is the basics, now lets create something with Tailwind

The Tailwind Juice

If you've been reading and following all these while, congratulations, now lets get more practical with Tailwind. We are going to create a simple UI card component.

Remember our index.html file? Open it and drop this code inside the <body> </body> tag.

<div class="border m-6 rounded-lg bg-white mx-auto shadow-lg max-w-xs overflow-hidden">
        <img class="h-24 min-w-full block" src="https://png.pngtree.com/thumb_back/fh260/back_pic/00/02/62/305619b17d2530d.jpg" />
        <div class="px-4 py-3 relative min-h-3"> 
            <div class="sm:flex sm:items-center">
                <img class="w-16 border-4 border-white border-white mr-3 rounded-full" src="https://avatars3.githubusercontent.com/u/13323281?s=460&v=4" />
                <div class="w-full">
                    <button class="float-right text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-blue text-blue hover:bg-blue hover:text-white">Follow</button>
                </div>
            </div>
            <div class="mt-2 text-center sm:text-left sm:flex-grow">
                <div class="mb-4">
                    <p class="text-xl font-bold leading-tight">Ezeugwu Paschal</p>
                    <p class="text-sm leading-tight text-grey-dark">@paschaldev</p>
                </div>
                <div>
                    <p class="leading-tight text-grey-darkest text-sm">
                        This is a cool profile card showcasing the awesomeness of <a class="text-blue no-underline" href="https://tailwindcss.com">Tailwindcss</a> built by awesome people who want to make the web a better place.
                    </p>
                </div>
                <p class="mt-6 text-xs text-grey-dark">
                    Followed by <a class="text-blue no-underline" href="#">Google</a> and <a class="text-blue no-underline" href="5 others">5 others</a>
                </p>
            </div>
        </div>
    </div>

Don't worry, you don't need to understand how I came up with the classes in the HTML, just ride along. Open the index.html file in your browser. If all went well, you should see exactly like the image below in your browser. If you don't just do a little debugging, most importanatly make sure you are loading the right css file for your build.

It's a profile card, everything was done by adding CSS classes, we didn't write any CSS for this, everything was composed from HTML and some selected CSS class. How COOL?

What you saw above is just something simple created with Tailwind CSS. You might feel adding all those classes is not really your thing and you'll prefer to create a custom UI for that and call it a card. Doing that is very simple, I won't get into the details of that but I'll let you figure it out yourself.

If we wanted to move all that and create a card UI component instead, we can simple define our markup how we want, Tailwind provides an @apply directive we can use in our CSS.

If you have used a CSS preprocessor like SaSS this is something similar to the @extend feature provided by SaSS

We can have something like this in our styles.css file:

.card{
    @apply .border .m-6 .rounded-lg .bg-white .mx-auto .shadow-lg .max-w-xs .overflow-hidden;
}

This represents the wrapper div tag we used in our markup above for the profile card. Then we run our build command.

./node_modules/.bin/tailwind build styles.css -o output.css

Tailwind generates the appropriate CSS in the output.css file. Those texts you see .border, .m-6 etc are classnames available in Tailwind so what happens is that it fetches the style and extends our .card class with it.

Conclusion

Tailwind is new and yet awesome because it tries to solve a design problem that many of us face on the low but we just keep quiet about it. What I did here is just the basics but it covers the fundamentals of Tailwind.

Like I've said earlier, if everything here is still strage to you, don't worry, their documentation page is expressive enough to get you up and running.

Checkout Tailwind CSS here https://tailwindcss.com

Ezeugwu Paschal

1 post

Fullstack Web Developer | Lover of the UNIX OS Architecture.