DEV Community

Kiran
Kiran

Posted on • Originally published at kirandev.com

How to Setup Tailwind CSS with HTML

In this article, I'll show you how to install and setup the Tailwind CSS with your HTML project.

Create a new project

Let's create a new folder tailwind-html and change directory to the newly created one.

mkdir tailwind-html

cd tailwind-html
Enter fullscreen mode Exit fullscreen mode

Create a package.json file

npm init -y
Enter fullscreen mode Exit fullscreen mode

Install the Tailwindcss dependencies

npm install tailwindcss@latest

npm install autoprefixer@latest

npm install @tailwindcss/forms
Enter fullscreen mode Exit fullscreen mode

Create the Tailwind configuration file

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Update the package.json file

Open the package.json file and make the following changes.

"scripts": {
    "build-css": "tailwindcss build src/styles.css -o public/styles.css"
}
Enter fullscreen mode Exit fullscreen mode

Update the tailwind.config.js

Open the tailwind.config.js file and replace the content with the following code.

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans]
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: [require('@tailwindcss/forms')]
};
Enter fullscreen mode Exit fullscreen mode

Add Tailwind plugins

Create a new folder src in the project root and new file styles.css in the src folder.

Add the following content to the styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Build the Tailwind CSS

You should run the command npm run build-css to build the css. This command create a new folder public with a file styles.css.

You should link styles.css in your HTML pages.

<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
Enter fullscreen mode Exit fullscreen mode

I hope you found this article insightful.

Let's connect 🌎

Discussion (0)