Css style

Tailwind CSS: discover the joys of functional and responsive CSS

Tailwind CSS is a new CSS framework first released in late 2017. It takes a different approach to styling that might surprise you. In particular, Tailwind abandons semantic class names in favor of more targeted classes found in “functional CSS”.

Functional CSS vs Semantic CSS

To get an idea of ​​the difference, let’s consider a header element. Let’s say we want to make it bold and red. In semantic CSS, we are encouraged to create a class that describes the role the class plays in our application, say app-header, and then apply the required styles: app-header: { font-weight: bold; color: red; }. The idea here is that you are creating classes that are meaningful to you in terms of their semantic (as opposed to syntactic) role in the design of the user interface.

On the other hand, in functional CSS you would create a class that describes the action of the style, such as text-bold-red. Tailwind uses this mode and creates a multitude of utility classes for use in your applications. For example, in Tailwind you would use font-bold and text-red to create your header style.

This goes against conventional wisdom when creating style sheets. But sometimes the conventional wisdom is incomplete, and it turns out that Tailwind’s approach is a powerful and straightforward approach to UI styling. Tailwind uses a consistent naming convention, and as a result, you can start (much faster than with CSS or another framework like Bootstrap) keeping all of its capabilities in mind, so you can style your app without slowing down.

For example, in Tailwind the shortcut for padding is p-0, where the first letter indicates a padding and the second the value of that padding. So p-0 sets the padding to 0, the equivalent of padding 0px 0px 0p 0px in a style. In addition, you can set the left padding to zero with pl-0, left and right at zero with px-0, and up and down to zero with py-0. It is quite practical.

In this tutorial, you’ll see how to create a responsive layout to better understand how Tailwind CSS works.

Including tail wind

First, create a new folder to contain the tutorial project and create an index.html file. The fastest way to include Tailwind in your file, via unpkg, is shown in Listing 1. Add this header to your file.

List 1. Tailwind Header

!DOCTYPE html>


 
 
 
 
  Intro to Tailwind CSS



Example of a Tailwind navigation bar

Let’s start with a navigation bar. List 2 has a simple navigation bar with a title, a few links, and a background color.

Listing 2. A simple navigation bar


 

Listing 2 specifies a flexible layout with the flex Downwind course. It also specifies the justify-content: space-between; style with justify-between and justify-items: center; with items-center. You can start to see how Tailwind’s utility classes provide a kind of shortcut for styles.

Then List 2 uses the h-28 utility to give the navigation bar a fixed height of 7rem. Heights and widths in Tailwind are ordinal numbers associated with rem values ​​(more on height utilities here).

The background of the navigation bar is set with bg-blue-400. Tailwind colors follow a property color intensity format; in this case, background, blue and 400.

Finally, a padding of left and right 20 is defined with the syntax you have already seen: px-20.

Responsive layouts in Tailwind

Now you will see how to make things responsive. For the navigation bar, we want to center everything and hide the links and replace them with a mobile toolbar icon that opens a menu. (We’ll use a touch of vanilla JavaScript to accomplish the show / hide.)

Tailwind includes built-in breakpoints to manage responsiveness. These are shown in Table 1. It is also possible to configure custom breakpoints.

Table 1. Default reactive breakpoints

The idea here is to use the name of the breakpoint as a prefix to determine if the prefixed class will apply, like this: breakpoint:class. A key point to know about Tailwind is that it is mobile first, the default classes will therefore apply to everything. Breakpoints then control what applies by increasing the size from there. Now go back to the navigation bar to get a concrete understanding of this idea.

Responsive navigation bar example

Edit the index.html file to look like Listing 3.

Listing 3. The responsive navigation bar

Note that we have added the flex-col and md:flex-row classes to the navigation bar itself. This means that on 768px devices or bigger flexible layout will be tidy. This is the normal pattern of setting mobile styles by default and then overriding them on larger screens. We also allow the default height for the bar and then override it on medium and taller screens with md:h-28.

We use similar tricks to organize the ul elements.

Also note that we hide the movable button (defined as an inline SVG) for medium sizes with mh:hidden. The button will therefore appear as desired for smaller screens.

The JavaScript used to show / hide the menu in the mobile is visible in list 4. Note how it just uses Tailwind hidden to classify. This script goes at the end of the HTML body.

List 4. Show / hide JavaScript

Column layouts in Tailwind

Now turn your attention to the body of the page. A common responsive layout is to have a grid of cards that will have one, two, or three columns depending on the screen size. We will create this next with Tailwind.

First, create a few simple card divs, like in Listing 5. These cards have a rounded width, height, and border, using the syntax you saw.

List 5. Single card

...   
  

   
Card 1

   
Card 2

   
Card 3

   
Card 4

   
Card 5

   
Card 6

 

  ...

Next, let’s make the map container a responsive grid, using the classes seen in Listing 6.

Listing 6. Responsive Grid Container

Tailwind allows you to easily modify the columns of the grid according to the breakpoints. You can see how the default layout will contain a single column and then gradually more columns will be added for larger sizes. You can view it in your browser, resize the screen, and observe the layout change.

Now let’s improve the style of the cards. Listing 7 contains a sample of a card with a title.

Listing 7. Map style


     
Title 1

     
Lorem ipsum dolor sit amet, consectetur adipiscing elit

   

Listing 7 uses many Tailwind shortcuts to add rounded borders and a bold colored title bar. Also note that the map now uses md:w-11/12. This syntax for the width gives a proportional width of 11 / 12th (or the equivalent of width: 91.666667%;).

Tailwind cheat sheet

Tailwind packs a lot of power into a memorable and concise syntax. A great resource is this CSS Tailwind cheat sheet, which is handy for quickly finding what you need.

Tailwind is an alternative to approaches like Bootstrap or Foundation. It seems to be catching on, thanks to its greater simplicity. Additionally, Tailwind tops the charts for developer interest and satisfaction.

Copyright © 2021 IDG Communications, Inc.