Build a web page with Tailwind
Since a few days I’ve been playing around with Tailwind, a CSS framework that’s been released some days earlier. And I fucking love it!
In this little post I’m going to build a simple web page using Tailwind and show you why I love it and how easy it to create awesome stuff with this framework.
Important note: This post was written almost two years ago when the first public version was released. Since then it has grown a lot and recently reached a stable 1.0 version. I will do my best to provide an updated version as soon as possible, but until then it is best to check out the website: https://tailwindcss.com/docs/installation/
The final result will look like this:
As you can see, I’m not going build a whole website with a header, a navigation and a footer but the main content of a blog single view. It’s similar to the design I use for my own blog, but kept much simpler for demonstrating purposes.
You can find the whole source code on GitHub and follow my steps by checking the single commits.
Why Tailwind?
As I already mentioned, I really love Tailwind. But why? Let’s have a quick look at how this framework works and what benefits you have using it.
On their website they write
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
Utility-first means that, different from other frameworks like Bootstrap or Foundation, Tailwind won’t provide completely designed elements to build your user interface with.
Instead you get a great bunch of utility classes (or maybe you know the term “helper classes”) to build your own set of user interface elements.
This may sound strange at the beginning but the result of this way is that you can simply create interfaces that do not look like other interfaces created with the same framework. User interfaces created with bootstrap all look nearly the same.
Tailwind is made with the intention to be highly customizable. Written in PostCSS you can setup your config to match the style you want to have. You can customize nearly everything like colors, fonts, borders, spacing etc. Customizing is possible in Bootstrap as well, but lot more complicated and you often end up overriding CSS that has been defined in the core already.
Though it’s not implemented yet (is it?) Tailwinds approach leads to the big benefit that you can generate your own documentation using the Tailwind configuration. This documentation can be used as your companies styleguide.
I’ve already written enough, maybe even too much, so lets have a look at the example and see how fast you can get things done with Tailwind.
The example: A blog post single view
As already mentioned we are going to create a simple view presenting a blog post. I’m not going to explain how to setup Tailwind but start directly with the coding stuff. If you want to follow along with the post, just start with the webpack starter template provided by Tailwind (I did so as well).
Starting with the markup
As a first step, I started with the basic HTML sructure of my page. It starts with an image followed by an header block containing the title and some meta data. Next there will be the content and then a small footer with information about the author. No magic here.
Without any styles applied but just the compiled stylesheet using the basic Tailwind configuration, the page looks like this.
Tailwind already adds Normalize.css and also adds some other base styles so that you do not have to bother with it.
You can start right away adding some styles:
Add main style
Before styling the components of this page, I added some basic styles. In this case I wanted to add a container so that there is a max-width set, wanted it centered. Also the base font should be not black but a lighter black, be serif instead of sans-serif and have a readable line-height.
In Bootstrap and other frameworks, you would add a class to the <article> tag and add your stylings. But Tailwind already provides the classes for it, so you can simply apply them. So did I:
<article class="container mx-auto px-4 font-serif text-grey-darkest leading-normal">This is a good starting point to style the components.
The first component: The header
The first component that needed some changes was the header. I wanted the content of the header to have sans-serif font. I also wanted to change the font weight from bold to medium and change the color of the meta section. So? Yeah, I added the classes Tailwind already provides:
<header class="max-w-lg mx-auto my-8 text-center font-sans">
<h1 class="font-medium">Einführung in JavaScript Promises</h1>
<small class="text-grey">05/21, 2017 // JavaScript</small> </header>I also added some max-width and again centered the header section, so that the content of the header was not a wide as the title image.
In this article I’m using the colors Tailwind provides in their basic configuration. In a real world example you would define you own colors and use them instead. Same for other properties like margins and widths.
Avoiding repeating classes: @apply
It is going to be boring if I continue like above until the page is finished. I think you will have understood how the workflow is.
But for the content area there is something new, that is quite important. Tailwind does not only provide utility classes, you can also build your components using the utility classes.
For example the content area has many headings and paragraphs and all of them should have the same style. But you don’t want to add all the classes to all the elements. Instead Tailwind comes with the @apply command that helps you to avoid repetition.
In your stylesheet, add
h1, h2 {
@apply .mt-8 .mb-4 .font-sans .font-medium
}to apply the styles to every h1 and h2 of you page. This will look like following:
The same way you can create components as well. By applying the utility classes to a new .btn class, you can style your button component.
.btn {
@apply .font-bold .py-2 .px-4 .rounded .bg-blue .text-white;
}Now use the .btnclass to your buttons in your markup to have a result like this:
Responsive design
In Tailwind you can — of course — create responsive layouts. It uses the mobile first strategy. That means your basic style applies for all devices and using — again of course — utility classes you can change the style at some breakpoints.
The footer of the layout is simply a rounded image of the author followed by the name and some small description. On mobile everything is centered
<footer class="max-w-md mx-auto mt-16 py-16 border-t border-grey-light">
<div class="text-center">
<img src="pathto/image" alt="Rathes">
</div>
<div class="text-center">
<h2>Rathes Sachchithananthan</h2>
<p> Soy un desarrollador web especializado en Laravel y VueJs que vive en Alemania. Sígueme en <a href="#">Twitter</a> y en <a href="#">GitHub</a>
</p>
</div>
</footer>On tablets and every bigger screens I wanted to use a two column grid with the image on the left side and the content on the right side. How do I get this? By prefixing the utility classes with breakpoint-prefixes.
So the <footer>tag should be displayed in flex at the medium breakpoint, so I appended the class prefixed with md: and there you go. This md:flex class will only applied after the medium breakpoint is reached.
The same way I added additional classes to the inner elements and I got my layout I expected.
By default Tailwind comes with 4 breakpoints: “sm”, “md”, “lg” and “xl”. But you can simply extend, change or delete them by modifying the config file.
Conclusion
Even without changing the basic config too much (I added some extra margins and paddings) I created a not that bad looking layout for my blog posts. And the whole stuff took me maxium an hour.
At the beginning — especially if are used to Bootstrap or Foundation — all the stuff might feel quite strange, but once you get your head around, you will see really fast results for custom interfaces.
PS.: If some of my explanations are not clear enough, please feel free to ask me. I’m really happy to answer all your questions.
PPS.: Thank you very much Adam Wathan, Steve Schoger and the whole Tailwind team for creating such an awesome framework ❤️ ❤️ ❤️
