DEV Community

Junichi Takahashi
Junichi Takahashi

Posted on

How to set up Tailwind

#tailwindcss

Tailwind is a utility-first CSS framework.
This article describes how to set up Tailwind.

Install 

npm i --save-dev tailwindcss
Enter fullscreen mode Exit fullscreen mode

Init 

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Setting 

// tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Write 

/* src/index.css */

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

Build 

npx tailwindcss build -i ./src/index.css -o ./dist/index.css
Enter fullscreen mode Exit fullscreen mode

Using Tailwind in Page 

<!-- src/index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/dist/index.css" rel="stylesheet" />
  </head>
  <body>
    <p class="underline">Hello</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Check 

serve .
Enter fullscreen mode Exit fullscreen mode

http://localhost:3000/src/index.html

Support for Visual Studio Code 

// .vscode/extensions.json

{
  "recommendations": ["bradlc.vscode-tailwindcss"]
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

vparul profile image

Choosing the Right CSS Approach: Tailwind CSS vs Bootstrap vs Vanilla CSS

Parul Verma -

zoltanszogyenyi profile image

E-commerce checkout components built with Tailwind CSS and Flowbite

Zoltán Szőgyényi -

mike_andreuzza profile image

How to create a multistep form with Tailwind CSS and Alpinejs

Michael Andreuzza -

prudkohliad profile image

How to implement a Multi-Select Dropdown component with React and Tailwind CSS

Anton Prudkohliad -