Simple HTML Tailwind Integration With Bun

This tutorial follow the original guide from Tailwind installation/tailwind-cli.

Installing will ensure that you can create your own custom CSS classes, and handling as well HMR. In a Vanilla web project structure without vite or other modern framework.

Full document Google drive : Simple HTML Tailwind Integration With Bun

Recommended project structure :
./src/
./index.html

1. Installing TailwindCSS & Tailwind CLI.
   bun install tailwindcss @tailwindcss/cli

2. Create a index.css in your src/ folder.
   Copy & paste :
   

@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

1. At your root project directory create a tailwind.config.js file. Copy & paste :

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

1. Make sure you remove any tailwind CDN.

2. Build the CSS classes with the following command bun run tailwindcss -i ./src/input.css -o ./src/output.css --watch.
   It will detect all the changes and apply it in the output.css file

3. Run your project in localhost with bun run ./index.html.

4. Add the <link rel="stylesheet" href="./src/output.css"> to your index.html file.

And that's it, you will now be able to practice Tailwind CSS Without the CDN.