Quick guide for TailwindCSS

First here is view of the type of project we want to create:
https://stackblitz.com/edit/js-gz1gft?file=index.html

Start by creating a new folder for your project with any name you want in my case I'm going to use tailwindcss-sample

$ mkdir tailwindcss-sample
$ cd tailwindcss-sample

Then start by creating a package.json file with the -y flag

$ npm init -y

Install the tailwindcss using npm
Then start by creating a package.json file with the -y flag

$ npm i tailwindcss

Create a src folder and a new css file inside with any name to add the tailwindcss components, in my case I'm going to use style.css and import this three lines.

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

Create the tailwind.config.js file in the app route

npx tailwindcss init

This will create a file like this

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Create a dist folder and two new files, one html file and one css file, in my case I'm going to use index.html and style.css, the folder structure will look like this.

tailwindcss-sample
├── dist
│   ├── index.html
│   └── style.css
├── node_modules
├── src
│   └── style.css
├── package-lock.json
├── package.json
└── tailwind.config.js

Change the package.json script to run the build css

{
  ...
  "scripts": {
    "build:css": "tailwind build src/style.css -o dist/style.css"
  },
  ...
}

And for last step run the command to build the css components

npm run build:css

Now we can start using tailwind into our index.html file to test different features. Note: Each time you make a change in the style.css need to run the command to build it again to refresh in the dist folder