Skip to main content

Tailwind CLI setup

install tailwind npm deps​

npm install -D tailwindcss
npx tailwindcss init

setup tailwind.config.cjs​

add Glob to include/exclude dirpath/filetype & define custom utilities

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

create src/input.css​

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

start Tailwind CLI​

npx tailwindcss -i ./src/input.css -o ./index.css --watch

for vite

npx tailwindcss -i ./src/input.css -o ./src/index.css --watch

add Tailwind to root HTML ie index.html or whatever​

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

References​