Tailwind CSS and HTML for Production without Framework

Want to use plain old HTML with Tailwind CSS but you're not using any framework?

Because https://cdn.tailwindcss.com is only advised to be used for "play" not for production.

Here's the ABC:

1. Assuming you already have your html site in a directory called 'site', create a parent directory to contain 'site' - 'tailwind/site'

2. Install and initial Tailwind CSS:
   cd tailwind
npm install -D tailwindcss
npx tailwindcss init

3. Update the content array of your tailwind.config.js to:
   content: ["./site/**/*.html"]

4. If you have any theme config go ahead to update the theme object as well

5. Create a tw.css file in your project root ./tailwind/tw.css and add the following tailwind directives:
   @tailwind base;
@tailwind components;
@tailwind utilities;

6. Run Tailwind build command
   npx tailwindcss -i ./tw.css -o ./site/main.css --watch

7. Tailwind will generate a main.css inside your /site dir. Add <link> it to your html and start using Tailwindcss utility classes

8. When you're done building your site, stop the tailwind cli and copy the site directory or push just the site directory to GitHub for onward deployment

9. Enjoy!