Introduction
If there is one CSS framework I love to use frequently, it is Tailwind CSS. This tutorial is aimed at helping you get started with Tailwind CSS, the fun of using it and lastly hoping you would adopt it in your next project.
At the end of this tutorial, you would know what Tailwind CSS is, why you should use it, how to set it up with different framework, library or language, how to build a simple app with it, how to add extension support for easy usage (bonus) and many more.
Prerequisite: I would be using Tailwind CSS with ReactJS. It is required that you are familiar with at least HTML/CSS or any other web library or frameworks such as Vue, NextJs, etc.
Table of Content
• What is Tailwind CSS?
• What is CSS framework?
• Why should I use or chose Tailwind CSS?
• How do I set up my project to use Tailwind CSS?
• Getting started with tailwind CSS
• Customizing tailwind CSS style
• Extra:
Worried about duplication?
Support for Dark Mode
Tailwind UI
What is Tailwind CSS?
From the official website of Tailwind CSS, it is defined as a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
What is CSS framework?
A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and focused around interactive UI patterns. Examples of CSS frameworks are Tailwind CSS, bootstrap, Pure, Milligram, etc.
Why should I use or chose Tailwind CSS?
You must be wondering, why should I chose Tailwind CSS? Well, by the end of this tutorial you should know why yourself. Listed below are some of the reasons why you should chose Tailwind CSS.
• Faster development process (allows you build website faster)
• Easy to learn with little CSS knowledge
• Gives you full control of how you want your website to look like (customizable)
• Helps you understand and practice CSS more
• Makes website responsive
• Well known developers uses it, check out their amazing reviews on tailwind CSS official website
• Good documentation from their website
How do I set up my project to use Tailwind CSS?
In order to integrate Tailwind CSS to your project, you have to have node.js installed on your computer to make use of node package manager (npm) in your terminal.
Tailwind CSS provide documentation for installing Tailwind CSS either with html project or with libraries or frameworks. If you are installing it with your html project, click here.
This tutorial is focused on using react. In the link pasted above, switch over to the framework guide and select the framework you want to add Tailwind CSS to for the installation guide.
For react project, installation guide is found here. This should contain the latest installation guide.
At the time of writing this article, the installation guides are listed below:
Setting up Tailwind CSS in a Create React App project:
• Create your project
• Install Tailwind CSS
• Configure your template paths
• Add the Tailwind directives to your CSS
• Start your build process with npm start
• Start using Tailwind in your project
Getting started with tailwind CSS
Now that you have installed and setup tailwind CSS correctly for your project, it’s time to get started with building that amazing website with tailwind CSS.
I built a simple website where I explored some concepts such as grid, flexbox, responsiveness and many more. The website is called fifth-luxe. The GitHub repo can be found here.
Getting started with the project, I added an extension “Tailwind CSS IntelliSense” for VS Code for intelligent autocomplete suggestions, linting, class definitions and more, all within your editor and with no configuration required. Using this extension for your project will make things super easy for you.
In fifth-luxe website project, I created a component folder in the src folder where I created some files; Card, Footer, Header, MainContent. I have added the codes to each of the files in order to get the desired website design. Check the GitHub link to see the codes for each file.
Wondering how to know the CSS utility to use, head to the doc page on tailwind CSS website and type in the CSS style you want to add to see it usage. To use “margin”, click in the search bar on the left sidebar of the page.
The above modal appears where you would type in the CSS style you are looking for. Upon selection, the documentation page is displayed showing the usage and examples.
Customizing tailwind CSS styles
You might have your own custom colors, width, font family, font sizes, etc. for your desired project, how can you modify tailwind CSS predefined styles to incorporate your stylings?
By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations. See doc here for more on how to customize your project.
Optional, if you just want to customize a little portion of your project, then changes can be made in the code as shown below. In the screenshot below, the text “name” was given a custom color of blue using “text-[#182754]”.
Also, to see the vanilla CSS style for each of the tailwind CSS utility class used, hover over each utility class to see the vanilla CSS style above each one.
What to learn more, let’s continue.
Worried about duplication?
If you're repeating the same utilities over and over and over again, all you have to do is extract them into a component or template partial and boom — you've got a single source of truth so you can make changes in one place. Check out examples on reusing styles here.
Support for Dark Mode
Super love this cool feature. Enable dark mode in your configuration file then throw dark: in front of any color utility to apply it when dark mode is active. Works for background colors, text colors, border colors, and even gradients. See example.
Responsive Designs
Tailwind CSS provides five breakpoints: see full doc
‘sm’ – 640px
‘md’ – 768px
‘lg’ – 1024px
‘xl’ – 1280px
‘2xl’ – 1536px
Tailwind UI
Tailwind UI is a collection of beautiful, fully responsive UI components, designed and developed by the creators of Tailwind CSS. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help you find the perfect starting point for what you want to build. Find out more.
Conclusion
I am definite this tutorial has given you a good understanding of Tailwind CSS, the configuration, usage, advantages, and some extra benefits. Feel free to check out the official website documentation though this tutorial summarize almost all you need to know to get started using Tailwind CSS. I hope you would use Tailwind CSS to style your next project irrespective of the library or framework you would use. Also, check out the live and GitHub repo for the demo project to see the usage of Tailwind CSS utility classes. Playing around with Tailwind CSS can be fun, wish you try it out.