Written on October 5, 2023 by Jessica Agorye

Estimated read time 5 minutes

How to Use Tailwind CSS

Web developers create the digital landscapes of the internet in the same painstaking way that a great architect creates the plan for a magnificent structure. The basic stack for web development includes HTML (Hypertext Markup Language), CSS (Cascading Style Sheet), and JavaScript, as well as the tools and frameworks necessary for building dynamic websites. In building a dynamic website, CSS serves as a crucial aspect of front-end web development. CSS deals with the elements on a web page and determines the font, colors, background, position, responsiveness, and so on. A famous illustration regarding the importance of CSS is to think of HTML as the skeletal frame and CSS as the flesh that covers it up. We can associate CSS with the beauty of a webpage that offers a better user experience.

The ability to style HTML elements has developed over time, and there are a number of CSS frameworks that offer pre-designed CSS styles, utility classes, and components to streamline and organize the creation of dynamic web interfaces. One of the frameworks common in the eco-system and a popular choice for developers is called Tailwind CSS.

The purpose of this article is to explain Tailwind CSS, its elements, and the benefits of using it in your applications.

What is Tailwind?

Tailwind is a utility-first CSS framework that consists of classes that can be composed to build any design directly into your markup. If you're accustomed to writing CSS in one of the three ways—internal, external, or inline—you'll see that Tailwind is written in your markup similarly to inline CSS. Inline styling is regarded as being cram-full and not best practice. However, the difference between writing vanilla CSS inline and using Tailwind is that Tailwind provides sets of predefined utility classes that, when applied, style the elements, which redefines the way we write CSS styles. Usually, we would write CSS in this format by targeting the element name, or with the help of a class (.) or an id (#);

However, styling elements in Tailwind Css are written like so;

In the image above, you can see that tailwind utility classes are written inside the class attribute (class = “ "); this approach is to make development simple and fast, amongst other advantages that we’ll discuss later.

Tailwind Installation

There are a few stages involved in getting Tailwind CSS up and running; these processes are provided on the Tailwind website. There are numerous ways to install Tailwind, but we'll concentrate on two popular ones: CDN and CLI;

CDN - The CDN (Content Delivery Network) can be placed in your HTML boilerplate; all you have to do is place it in the <head> </head> of your HTML file.

CLI - To get started with the Tailwind CLI (Command Line Interface) tool, you have to install Tailwind using Node Package Manager (NPM); you should have already downloaded and installed Node.js.

Let’s go through the installation process step by step. Also, you can visit the official website to view the different methods of using the tool.

Step One:

Open your IDE; in this instance, the text editor we'll be using is Visual Studio Code, and then launch a new terminal. Enter the following into your terminal:

Create a JSON file; npm init -y

Once the JSON file is created; type in the tailwind command; npm install -D tailwindcss

Followed by;

npx tailwindcss init

Step Two:

Configure the template paths; specifying template paths- means referring to the locations where your HTML or template files are located. First, create a folder and name it dist, and in the dist folder, create an index.html file; this is where we will specify the path for our HTML content. Instead of src like the document specifies, Content: [ “./src/**/*.{html,js}” ] //not this we will specify a path for the dist directory; Go to the config.js file, in the module exports content, specify the template parts;

Content: [ “./dist/*.{html,js}” ] // this

Step Three:

Create a src directory. In the src folder, create a file and name it input.css. In the input.css file, include the tailwind directives;

@tailwind base;

@tailwind components;

@tailwind utilities;

Step Four:

Run the CLI ; npx tailwindcss -i ./src/input.css -o ./ist/output.css –watch

After running the CLI, if you check the dist folder, you’ll see that an output.css file is created. Let's break down what this means;

In simpler terms, when you run the CLI, it simply builds your Tailwind CSS stylesheets.

npx: This is a tool that runs packages without installing them on your computer.
Tailwindcss: This refers to the CSS utility that processes the CSS code.
-i ./src/input.css: This specifies the input CSS file that Tailwind processes, which is located in the src directory (which we created earlier). It also contains custom CSS styles; in other words, you can write vanilla CSS and style elements in the HTML file.
-o ./dist/output.css: This is the output file path located in the dist directory
-- watch: This watches or monitors the changes made to the CSS file. When there’s an update or a change, it is instantly processed and updated to the output.css file.

Also, you can save this command in the package.json file so that when you need to run it, you do not have to type it all out, as you can see how lengthy it is. To do this, go to the package.json file and add it to the script section for easy execution like so; “dev”: npx tailwindcss -i ./src/input.css -o ./dist/output.css –watch to compile your project.

Also, note that you can choose any name for the script; it’s common to use start or dev, and in our example, we named our script dev.

Step Five:

Link the output.css file in your HTML boilerplate;

After the setup is complete, you can open the index.html file using the live server; if you do not have a live server, you can download it in the extension marketplace. Also, install Tailwind intellisence to get Tailwind utility class suggestions.

Tailwind Utility Classes

Utility classes are pre-made UI that allow us to build responsive web pages, and these pre-existing classes are added directly to your HTML. There are different utility classes for design elements; in the image below, we used the text utility class, the background utility class, and responsive modifiers.

Examples: .

Font-Size: Effects the size of your text e.g. text-sm, text-xl, text-2xl, etc.

Font-weight: Effects the thickness of characters in a text e.g. font-thin, font- extralight, font-bold, font-medium, etc.

Text-color: Effects the color of the characters in a text font-red-200, font-red-400, font-red-600

Background Color: This affects the background color of a web page. E.g. bg-blue-500. The number after the prefix determines the intensity of the color.

Responsive Design with Tailwind

Responsive design in web development is simply the technique of creating a web page that displays or renders properly on various devices/screen sizes. In Tailwind CSS, you can style elements at different breakpoints by using modifiers, e.g., ‘md’ - medium and ‘lg’- large, etc., to make your web page responsive. Let’s go through a quick example of how this works.

We have an H1 with the line "Welcome to Tailwind CSS" in our document. We used black for the background (bg-black) and white for the text; however, we want the background color to change at different breakpoints, which is how this is written in Tailwind.

This means that on the smaller screen size, the background is black, but as we hit different breakpoints, the color changes. Evidently, when we get to the md: breakpoint, the background changes to red, and when we hit the lg: breakpoint, it changes to blue.

Already Made Templates

One of the newest features of Tailwind is the ability to use already-made customizable templates built with React.js and Next.js. These templates can be accessed by paying a fee depending on the plan, which is either for personal use or for teams and agencies.

Customizable Classes

Tailwind allows you to create your own utility classes depending on what your project requires. You are able to define custom styles and extend Tailwind's utility with your changes. E.g. In the theme section in the tailwind.config.js file you can include or define your custom colors like so;

In the image above, I customized myfave color. I can use myfave in my Tailwind file as a utility class.

There’s so much more you can do with customization if you’re not satisfied with the default values Tailwind offers.

Pros and Cons of Tailwind

Pros

Fast Development Time

Eliminates verbose naming

Responsiveness

Cons

Enlarged HTML markup

Dependency Management

Limited Customization

Large File Size

Benefits of Tailwind

The different benefits of using tailwind include;

Fast Development Time: Elements may be styled and removed more quickly, which speeds up development by eliminating the need to write large CSS rules.

Eliminates verbose naming: Naming custom classes in CSS can become verbose; also, because there's a separation of concern between HTML and vanilla CSS, we may forget what class name was given to an element, and to make changes, we would have to go back and forth to match the names, which may break the UI. However, the utility classes are consistent and can be applied to multiple elements.

Responsiveness: Tailwind provides responsive breakpoints when applied, and targets different sizes, making the websites or web pages compatible with different devices.

Limitations of Tailwind

Several limitations of Tailwind include;

Enlarged HTML markup: Because utility classes are added directly in the HTML markup, it makes your layout a little crowded.

Dependency Management: Unlike custom CSS you create using the .css extension, to use Tailwind, you need to manage dependencies either through a package (NPM or YARN). For instance, installing via NPM requires several installation processes.

Limited Customization: Utility classes are pre-defined which makes them more consistent and aids in a faster development process.

Large File Size: The set of utility classes that come in a rather large file may cause the pages to render slowly. However, unused styles can be removed from the production build.

Summary

Working with Tailwind CSS appears to be superfluous until you begin engaging with it. Because it's written straight in HTML, it makes your page appear packed, which many users dislike. However, the advantages become evident once you start interacting with Tailwind CSS. One of the most significant advantages is the speed with which it allows for development. Because Tailwind CSS includes a complete number of pre-defined utility classes, you can simply apply them right in your HTML content. This reduces the need to create custom CSS styles from scratch, resulting in a shorter development time. Although it may seem strange to write CSS directly in HTML, Tailwind CSS's benefits transcend this issue. It's vital to remember that while though Tailwind CSS encourages inline CSS for utility classes, you can still use external CSS files for any unique or custom styles that aren't covered by the utility classes. In conclusion, Tailwind CSS's straightforward method of expressing CSS in HTML gives notable speed improvements, streamlines responsive design, and lessens the need for creating unique media queries. Although it may stray from conventional CSS practices, once you experience its advantages in terms of development speed and usability, it turns out to be a useful tool.

Frequently Asked Questions

Can free HTML editors support other languages like CSS and JavaScript?

Yes, free HTML editors often support languages like CSS and JavaScript, enabling integrated web development.

Do I need web developer skills to use Shopify or WooCommerce?

No. Both platforms welcome beginners, but you might get more out of WooCommerce’s extensions if you’ve got some previous experience.

Can free HTML editors be used for professional web development?

Yes, free HTML editors like Visual Studio Code and Atom offer advanced features and are suitable for professional web development.

How does Verpex Web Development Hosting cater to developers' needs?

Verpex Web Development Hosting caters specifically to developers' needs by offering support for a wide range of programming languages, pre-installed development tools, and scalable resources to accommodate the growth of your project.