21st Apr 2021

TailwindCSS for Beginners

Web

Written By, Shivangi Majithiya

Overview

TailwindCSS is the first utility CSS framework. so you can customize your styling in Tailwind. In Tailwind CSS there are classes for almost all kinds of margins, padding, backgrounds, font sizes, font families, positions, shadows, etc…

Tailwind CSS was released in November 2017 which is developed and maintained by ADAM Wathan.In this blog , we are going to take a glimpse of how designers can start TailwindCSS in HTML development.

TailwindCSS setup with PostCSS:

For the setup of Tailwind CSS, you need to have Node.js 12.13.0 or higher. Now Create a New project folder for tailwind.

  • For the very first time, you need to initialize the package.json file in your folder. It enables us to use the node.js package manager for managing our project dependencies.

POSTCSS Plugin:

TailwindCSS provides @tailwind directives to include Tailwind’s Base, Components, and Utilities styles. Tailwind switches these directives to styles in CSS forms in the build procedure.

To set up a build procedure, we have to use the PostCSS plugin. PostCSS is a tool for transforming CSS with Javascript. So it is easy to build all the CSS styles from directives with the TailwindCSS PostCSS plugin.
In this project we will use an autoprefixer plugin. This plugin parses CSS code and includes vendor prefixes. Vendor prefixes means -webkit , -moz , -ms css.

For example :

  • To take complete advantage of the features of TailwindCSS we need to install the TailwindCSS package with PostCSS packages and autoprefixer plugin by this command.

    After this command, we can see a node_modules folder and package-lock.json file in our project folder.
    tailwind-folder
  • Now we need to create an initial configuration file of tailwind with the below command.

    This command creates one file tailwind.config.js, we can modify tailwind styles and add our classes to this file.
    tailwind-config
  • For including @tailwind directives we need to create an src folder at the root of our project. In this, we have to create a CSS folder for all the styles and then create tailwind-directives.css file.
    tailwind-css-file
    Now put all three directives in tailwind-directives.css

    If you are using import PostCSS plugin then you need to add @import directive instead of @tailwind directive
  • Now let’s create a Postcss.config.js (PostCSS configuration file) at the root of your project and add this code in this file

    postcss-config-file
  • To execute the build procedure for generating tailwind styles from the tailwind-directives.css file, there are 2 ways to do this.
    • By using the run npx command directly in the terminal.

      This command generates tailwind.css with all the tailwindCSS styles and vendor prefixes.
      css-files
    • Compile tailwind.css in package.json

      package-json-file

After that run the build command :

You can check that there is one generated file tailwind.css in your project folder with all tailwindCSS styles and Autoprefixer vendor prefixes are already added. -Webkit, -moz are already available in tailwind.css.

TailwindCSS setup only with Autoprefixer :

A lot of steps are common as the above topic so here are the steps without description.

  • Let’s install the autoprefixer plugin with this command.
  • For including @tailwind directives we need to create an src folder at the root of our project. In this, we have to create a CSS folder for all the styles and then create tailwind-directives.css file.
    tailwind-css-file
    Now put all three directives in tailwind-directives.css
  • To execute the build procedure to generate tailwind styles in the css folder from tailwind-directives.css file, let’s run below command. This command generates tailwind.css with all the tailwindCSS styles and vendor prefixes.

    css-files

Conclusion

I hope this blog might be useful for those who are new in the designing field. Our next blog is on How to setup tailwindCSS in a react project.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd