Getting started with TailwindCSS

Tailwind CSS can be used to make websites in the fastest and the easiest way.

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. The beauty of this thing called tailwind is it doesn’t impose design specification or how your site should look like, you simply bring tiny components together to construct a user interface that is unique. What Tailwind simply does is take a ‘raw’ CSS file, processes this CSS file over a configuration file, and produces an output.

Installation
In this project, we will install Tailwind CSS via Node Package Manager (npm), but you could also use the CDN. If you choose the latter approach, you will not be able to use some features like extracting custom CSS classes. But if you just want to give it a spin, then go for it.

/* Tailwind CSS CDN */
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

To install Tailwind, we will first create a folder:

$ mkdir mytailwindcsssite
Now, change to the newly created folder and initialise npm to install Tailwind:

$ cd mytailwindcsssite
$ npm init -y

After initialising npm in the folder, a package.json file will be created. Now we can install the tailwindcss package easily by running the following command:

$ npm install tailwindcss

Adding Tailwind to the project

The next step is to add Tailwind to our project. For that, we will create a file called src/styles.css in which we will inject all three Tailwind directives to import base, components, and utilities styles:

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

You could also add a Tailwind configuration file within the project that lets you create your own CSS classes or import fonts via the @import rule. To install the tailwindcss configuration file, run the following command:

$ npx tailwindcss init

This will create a new file called

tailwind.config.js