Tailwind has grown massively in popularity the past couple years for its ability to streamline front-end design for web pages.

TailwindCSS is a utility-first CSS framework. This means it provides users with a set of CSS helper classes to build their HTML pages. In addition to these CSS classes, Tailwind provides a complete package with the CLI and various theming and configuration options. These options enable users to adapt and scale this framework for any development need. In today’s article, we’ll see how to get started with TailwindCSS.

Installation and Configuration

The simplest way to install Tailwind is using the Tailwind CLI, which can be installed as a node package:

npm install tailwindcss

Step 2 - Include Tailwind in the CSS file

Next, include @tailwind directives for the base, components, and utilities in the primary CSS file of your project. These directives will be converted into the appropriate Tailwind CSS code during the build process of Tailwind.

@tailwind base;
@tailwind components;
@tailwind utilities;


Now we’ll generation a configuration file to allow users to customize TailwindCSS. For instance, you can include additional classes and settings in the CSS. We can use the following command to generate the tailwind.config.js file:

npx tailwindcss init

Next, modify the content section of the config file to include all the template files of your site. The following configuration will account for all the HTML and JS files in the src folder.

TailwindCSS Build Process

Now we need to build our css to process all the defined CSS files and insert the styles according to the configurations.

The build process can be carried out either using PostCSS, which enables users to transform CSS with JavaScript, or using the Tailwind CLI. We will use the Tailwind CLI to carry out this build process. Users can directly run the following command in the CLI.:

npx tailwindcss -i css/main.css -o public/main.css --watch

The -i flag indicates the input CSS file, while -o flag indicates the output CSS file. The –watch flag will continuously watch the file and rebuild the CSS with each change.

Since we have provided the content path in the tailwind.config.js file, TailwindCSS will watch the files within the provided location and create only the CSS classes referenced in these files. It helps to reduce the size of the CSS files as they include only the absolute necessary classes.

Users will need to carry out this build process each time a style change occurs. So a better way to manage it is to add this command to the script section of the package.json files. Then it will automatically build the CSS files each time we build the application.

"scripts": {
"build": "npx tailwindcss -i css/main.css -o public/main.css"
},

This will ensure that tailwind will generate the necessary CSS files at the build stage.

Iterating TailwindCSS with HTML File

The final step for using TailwindCSS is to integrate the built CSS file within your HTML. The only requirement for this step is to link the newly created CSS file as a stylesheet.

Have a look at the following code block. There, we have added the CSS file and configured some classes within the HTML elements to get the necessary styling.

Index.html

If we look at the live preview of the page now, you can see that all the referenced CSS styles are applied to the HTML file.

That's it, and we have created a styled HTML page using Tailwind! These predefined classes provide the flexibility to facilitate any design without adhering to any framework-specific workflows or configurations

What are you going to use TailWind for? Let us know down below!

As always, happy coding from your friends at Codesphere, the all-in-one development platform!