Tailwind CSS in HTML starter via NPM

Tailwind CSS is a utility-first CSS framework. This article includes steps to install Tailwind CSS in HTML via package manager and how to properly process Tailwind CSS. Although it requires a bit more setup, it is definitely the best way to make use of all of the features that Tailwind CSS can provide.

Step 1 — Initialize package.json

npm init -y

Note: The -y flag will say yes to all questions

Step 2— Install Tailwind CSS

npm install -D tailwindcss@latest

-D option if to save package to peerDependencies

Step 3— Include Tailwind CSS directives

Now that Tailwind CSS is installed, the next step is creating a tailwind.css file and add the following code to inject the Tailwind CSS directives.

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

Step 4— Setup Tailwind configuration file

The configuration file makes it easy to customize the classes in Tailwind CSS by changing any fonts, color, spacing, etc.

npx tailwindcss init

A minimal configuration file named tailwind.config.js is generated.

module.exports = {
 content: ["./index.html"], // Paths to all template files
 theme: {
  extend: {},
 },
 plugins: [],
}

Step 5— Processing Tailwind CSS

We’ll be using TailwindCSS CLI to build the CSS. In the following command ./assets/scss/tailwind.css is the input, and the built-css output will be placed in ./assets/css/tailwind.css.

npx tailwindcss -i ./assets/scss/tailwind.css -o ./assets/css/tailwind.css --watch

Also we can add the following script into package.json to easily build CSS with command npm run dev .

"scripts": {
"dev": "tailwindcss -i ./assets/scss/tailwind.css -o ./assets/css/tailwind.css --watch",
}

Step 6— Link Tailwind CSS into HTML

Create an index.html file; Add the following code in HTML template head section.

<!-- index.html -->
<link rel="stylesheet" href="./assets/css/tailwind.css" />

And This is it. Enjoy!

The post Tailwind CSS in HTML starter via NPM first appeared on Anlisha Maharjan.