How to Install Tailwind CSS

How to Install Tailwind CSS

B Z's photo
B Z
·

3 min read

I recently used Tailwind CSS and daisyUI to style a full stack web app I'm developing, and I like how little css I had to actually write to build a presentable MVP. Here are my notes on how to install Tailwind CSS following Traversy Media's awesome Tailwind Crash Course.

  1. Start a package.json file npm init -y

  2. Install Tailwind CSS as a dev dependency, this will create a node_modules folder, in package.json, you can find 'tailwindcss' in the 'devDenpendcies' npm i -D tailwindcss

  3. Create a tailwind.config.js file npx tailwindcss init

  4. In tailwind.config.js, add the path to all template files (tell tailwind where to look for utility classes)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./*.html'], // look for any html files in the root
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. Add tailwind directives add an input.css (you can call it whatever you want) and add the three layers of tailwind:
@tailwind base;
@tailwind components;
@tailwind utilities;

Screenshot of my VSCode window

  1. Open package.json and change "test" in "scripts" into:
"scripts": {
    "build": "tailwindcss -i ./input.css -o ./css/style.css", // build will run once
    "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch" // will keep watching during development
  },

Note: You can name and create the input and output css files whatever and wherever you want but make sure you have the correct paths and file names

  1. Build (this command will also create the css folder and style.css file as I stated in the scripts) npm run build After building, you should find tailwind styles in your output css file -- all was compiled from the tailwind directives in the input css file

  2. Add style in html and try creating an h1 element with tailwind utility classes <link rel="stylesheet" href="css/style.css"> <h1 class="bg-slate-400 text-4xl p-5">Hello World!</h1>

  3. Keep developing and watching npm run watch

  4. Open html in the browser and you will see:

Final Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="css/style.css">
  <title>Tailwind Practice Page</title>
</head>
<body>
  <h1 class="bg-slate-400 text-4xl p-5">Hello World!</h1>
</body>
</html>

package.json:

{
  "name": "tailwind-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tailwindcss -i ./input.css -o ./css/style.css",
    "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.1.8"
  }
}

Files:

Screenshot of files in my Tailwind Practice folder

#100Devs, if you are trying to install Tailwind CSS and daisyUI for your CRUD apps, I captured a screenshot for my full-stack template files in VScode:

Screen Shot 2022-10-24 at 5.36.31 PM.png

Follow the installation steps above, but note that you need to point to the correct input and output CSS files.

Also, for those that want to install daisyUI, run: npm i daisyui

and configure in tailwind.config.js:

module.exports = {
  content: ["./views/**/*.{ejs, html, js}",],
  theme: {
    extend: {},
  },
  plugins: [],
  plugins: [require("daisyui")],
}

When running the app, open two terminal windows:

  • In the first one, run: npm start

  • In the second one, run: npm run watch

Tailwind CSS