DEV Community

Cover image for Tailwind CSS and HTML for Production without Framework
Keme Kenneth
Keme Kenneth

Posted on

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!

Top comments (0)