Tailwind packs a lot of power into a memorable and concise syntax, making it a fast-rising alternative to the likes of Bootstrap and Foundation. Credit: Thinkstock Tailwind CSS is a newer 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 the more purpose-oriented classes found in “functional CSS.” Functional CSS vs. semantic CSS To get a sense of the difference, 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 app, 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 with respect to their semantic (as opposed to syntactic) role in the UI design. 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 takes this mode and creates a wealth of utility classes for use across your applications. For example, in Tailwind you’d use font-bold and text-red to create your header style. This flies in the face of conventional wisdom when creating stylesheets. But sometimes conventional wisdom is incomplete, and it turns out that Tailwind’s approach makes for a powerful—and simple—approach to styling the UI. Tailwind uses a consistent naming convention, and as a result you can begin (much faster than with CSS or another framework like Bootstrap) to keep all of its capabilities in your head, so you can style your application without breaking stride. For example, in Tailwind the shorthand for padding is p-0, where the first letter indicates 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. Moreover, you can set the left padding to zero with pl-0, the left and right to zero with px-0, and top and bottom to zero with py-0. That’s pretty handy. In this tutorial, you will see how to build a responsive layout to get a deeper understanding of how Tailwind CSS works. Including Tailwind Begin by creating a new folder to hold the tutorial project, and create an index.html file. The quickest way to include Tailwind in your file, via unpkg, is seen in Listing 1. Add this header to your file. Listing 1. Tailwind header !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css"> <title>Intro to Tailwind CSS</title> </head> <body> </body> </html> Tailwind navbar example Let’s begin with a navigation bar. Listing 2 has a simple navbar with a title, a few links, and a background color. Listing 2. A simple navbar <body> <nav class="flex justify-between items-center h-28 bg-blue-400 px-20"> <h1>Tailwind Intro</h1> <ul class="flex justify-between items-center w-56"> <a href="#"> <li>Link</li> </a> <a href="#" > <li>Link</li> </a> <a href="#" > <li>Link</li> </a> </ul> </nav> </body> Listing 2 specifies a flex layout with the flex Tailwind class. It also specifies the justify-content: space-between; style with justify-between and justify-items: center; with items-center. You can begin to see how Tailwind’s utility classes provide a sort of shorthand for styles. Next, Listing 2 uses the h-28 utility to give the navbar a fixed height of 7rem. The heights and widths in Tailwind are ordinal numbers that are associated with rem values (more info on height utilities here). The background of the navbar 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 set with the syntax you’ve already seen: px-20. Responsive layouts in Tailwind Now you will see how to make things responsive. For the navbar, 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 splash of vanilla JavaScript to accomplish the show/hide.) Tailwind includes built-in breakpoints for handling responsiveness. These are shown in Table 1. It is also possible to configure custom breakpoints. Table 1. Default responsive breakpoints The idea here is you use the breakpoint name as a prefix to determine if the prefixed class will apply, like so: breakpoint:class. A key point to know about Tailwind is that it is mobile first, so default classes will apply to everything. Breakpoints then control what applies going up in size from there. Return now to the navbar to get a concrete understanding of this idea. Responsive navbar example Modify the index.html to look like Listing 3. Listing 3. The responsive navbar <nav class="flex flex-col md:flex-row justify-between items-center bg-blue-400 text-white px-20 md:h-28"> <h1>Tailwind Intro</h1> <svg id="mobile-button" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 103.17" class="h-10 md:hidden" xml:space="preserve"> <g><path d="M26,0h70.87c7.15,0,13.65,2.93,18.36,7.64l0.22,0.24c4.58,4.69,7.42,11.1,7.42,18.13v51.16c0,7.15-2.93,13.65-7.64,18.36 c-4.71,4.71-11.21,7.64-18.36,7.64H26c-7.14,0-13.64-2.93-18.35-7.64H7.64C2.93,90.82,0,84.32,0,77.16V26 c0-7.13,2.92-13.63,7.64-18.35l0.02-0.03C12.38,2.92,18.87,0,26,0L26,0z M41.31,29.74h40.26c2.25,0,4.09,1.84,4.09,4.09l0,0 c0,2.25-1.84,4.09-4.09,4.09H41.31c-2.25,0-4.09-1.84-4.09-4.09l0,0C37.22,31.58,39.06,29.74,41.31,29.74L41.31,29.74L41.31,29.74z M41.31,65.25h40.26c2.25,0,4.09,1.84,4.09,4.09l0,0c0,2.25-1.84,4.09-4.09,4.09l-40.26,0c-2.25,0-4.09-1.84-4.09-4.09l0,0 C37.22,67.09,39.06,65.25,41.31,65.25L41.31,65.25L41.31,65.25z M41.31,47.5h40.26c2.25,0,4.09,1.84,4.09,4.09l0,0 c0,2.25-1.84,4.09-4.09,4.09H41.31c-2.25,0-4.09-1.84-4.09-4.09l0,0C37.22,49.34,39.06,47.5,41.31,47.5L41.31,47.5L41.31,47.5z M96.88,8.2H26c-4.9,0-9.35,2-12.57,5.22l-0.02,0.02C10.2,16.65,8.2,21.1,8.2,26v51.16c0,4.89,2.01,9.34,5.23,12.56l-0.01,0.01 c3.23,3.22,7.68,5.23,12.57,5.23h70.87c4.88,0,9.33-2.01,12.56-5.24c3.23-3.23,5.24-7.68,5.24-12.56V26c0-4.8-1.93-9.17-5.04-12.39 l-0.19-0.18C106.21,10.21,101.77,8.2,96.88,8.2L96.88,8.2z"/></g> </svg> <ul id="mobile-menu" class="flex flex-col md:flex-row hidden md:flex justify-between items-center w-56"> <a href="#"> <li>Link</li> </a> <a href="#" > <li>Link</li> </a> <a href="#" > <li>Link</li> </a> </ul> </nav> Notice we have added the flex-col and md:flex-row classes to the navbar itself. This means that on devices of 768px or greater the flex layout will be row. This is the normal pattern of defining default mobile styles and then overriding them on larger screens. We also allow the default height for the bar and then override it on medium-size and larger screens with md:h-28. We use similar tricks to arrange the ul elements. Notice too that we hide the mobile button (defined as an inline SVG) for medium sizes with mh:hidden. The button will therefore appear as we want for smaller screens. The JavaScript used to show/hide the menu in mobile is seen in Listing 4. Note how it just uses the Tailwind hidden class. This script goes at the end of the HTML body. Listing 4. Show/hide JavaScript <script> var button = document.querySelector('#mobile-button'); button.addEventListener('click', function (event) { var menu = document.querySelector('#mobile-menu'); if (menu.classList.contains("hidden")){ menu.classList.remove("hidden"); } else { menu.classList.add("hidden"); } }); </script> Column layouts in Tailwind Now turn your attention to the page body. A common responsive layout is to have a grid of cards that will be one, two, or three columns depending on the screen size. We are going to create that next with Tailwind. First, make a few simple card divs, as in Listing 5. These cards have a width, height, and rounded border, using syntax you’ve seen. Listing 5. Simple card ... </nav> <div class="grid"> <div class="w-64 h-64 border border-solid border-blue-900">Card 1</div> <div class="w-64 h-64 border border-solid border-blue-900">Card 2</div> <div class="w-64 h-64 border border-solid border-blue-900">Card 3</div> <div class="w-64 h-64 border border-solid border-blue-900">Card 4</div> <div class="w-64 h-64 border border-solid border-blue-900">Card 5</div> <div class="w-64 h-64 border border-solid border-blue-900">Card 6</div> </div> ... Next, let’s make the card container a responsive grid, using the classes seen in Listing 6. Listing 6. Responsive grid container <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 justify-items-center gap-2"> Tailwind makes it very simple to change the grid columns based on 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 this in your browser, resize the screen, and watch the layout change. Now let’s improve the styling for the cards. Listing 7 has a sample of a card with a title. Listing 7. Card styling <div class="w-64 h-64 md:w-11/12 border border-solid border-blue-900 rounded bg-blue-200"> <div class="w-full bg-blue-500 font-bold pl-2">Title 1</div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> Listing 7 makes use of many Tailwind shortcuts to add rounded borders and a bolded, colored title bar. Also notice that the card is now using md:w-11/12. This syntax for width makes for a proportional width of 11/12ths (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 Tailwind CSS Cheat Sheet, which is handy for quickly looking up what you need. Tailwind is an alternative to approaches like Bootstrap or Foundation. It seems to be catching on, thanks to its greater simplicity. In addition, Tailwind tops the charts for developer interest and satisfaction. Related content analysis Beyond the usual suspects: 5 fresh data science tools to try today The mid-month report includes quick tips for easier Python installation, a new VS Code-like IDE just for Python and R users, and five newer data science tools you won't want to miss. By Serdar Yegulalp Jul 12, 2024 2 mins Python Programming Languages Software Development analysis Generative AI won’t fix cloud migration You’ve probably heard how generative AI will solve all cloud migration problems. It’s not that simple. Generative AI could actually make it harder and more costly. By David Linthicum Jul 12, 2024 5 mins Generative AI Artificial Intelligence Cloud Computing news HR professionals trust AI recommendations HireVue survey finds 73% of HR professionals trust AI to make candidate recommendations, while 75% of workers are opposed to AI making hiring decisions. By Paul Krill Jul 11, 2024 3 mins Technology Industry Careers how-to Safety off: Programming in Rust with `unsafe` What does it mean to write unsafe code in Rust, and what can you do (and not do) with the 'unsafe' keyword? The facts may surprise you. By Serdar Yegulalp Jul 11, 2024 8 mins Rust Programming Languages Software Development Resources Videos