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:
Assuming you already have your html site in a directory called
'site'
, create a parent directory to contain'site'
-'tailwind/site'
Install and initial Tailwind CSS:
cd tailwind
npm install -D tailwindcss
npx tailwindcss initUpdate the content array of your tailwind.config.js to:
content: ["./site/**/*.html"]
If you have any theme config go ahead to update the theme object as well
Create a
tw.css
file in your project root./tailwind/tw.css
and add the following tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;Run Tailwind build command
npx tailwindcss -i ./tw.css -o ./site/main.css --watch
Tailwind will generate a main.css inside your /site dir. Add
<link>
it to your html and start using Tailwindcss utility classesWhen 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
Enjoy!
Top comments (0)