Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features>

Today we will have a look at how we can set up TAILWIND CSS and start writing css inside HTML instead of writing it in a separate CSS file.

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles, and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero runtime.

tailwind cli

to install tailwind with help of cli you need to have node js installed in your local system. you can download it from nodejs.org/en/download/
after downloading node js you can start with tailwind setup
to download tailwind we need to run the command npm install -D tailwindcss
now let's create a folder tailwind-cli-setup using the command mkdir tailwind-cli-setup
let's go into the folder using cd tailwind-cli-setup
now we need to set up the tailwind.config.js file in this folder
for setting up tailwind.config.js run command npx tailwindcss init
this will create a file named tailwind.config.js in the root directory

module.exports = {
  content: [""],
  theme: {
    extend: {},
  },
  plugins: [],
}

now we will add the path to our files in content
as of now we will put a ./index.html in content which is the path to our html file
you can also include * in content if you want to target all the files but make sure node_modules don't get scanned
you can check more about this on content-configuration
this is how our tailwind.config.js looks

module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

let's create an input.css file which will be our main css file
in this file, we need to add tailwind directives

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

now we will run a command which will build an output.css file for us
run npx tailwindcss -i ./input.css -o ./output.css --watch
now we need to link output.css in index.html

<link rel="stylesheet" href="./output.css">

let's try adding tailwind classes now !!

<body >
  <p class="text-center text-6xl font-bold text-cyan-700 m-4">Styled using TAILWIND</p>
</body>

Screenshot from 2022-02-07 11-37-00.png

and this is what our page looks like !!
you can also refer to tailwind docs for installation !!

Thanks for reading !!

https://rohankulkarni.tech

Rohan Kulkarni

Rohan Kulkarni

Get started with Tailwind CSS 🚀

basic setup with tailwind CLI

tailwind cli