Setup Tailwind CSS v3 for Non Javascript Projects

=> UPDATED 2012-12-23
Removed Parcel. I figured Parcel was not needed. Updated post.

I converted this blog from Next.js to Zola. I wanted to keep using Tailwind CSS, so I researched how to set up non-javascript projects. Below is how it is done.

Setup Tailwind CSS

npm install -D tailwindcss postcss cssnano autoprefixer postcss-import

Create .postcssrc.json and tailwind.config.js. And add the script lines to package.json. As below:

// package.json
// ### Replace "src-styles/styles.css" with your source file
// ### Replace "static/css" with your output file
{ 
  "scripts": {
    "watch": "postcss src-styles/styles.css -o static/css/styles.css --watch",
    "build": "postcss src-styles/styles.css -o static/css/styles.css"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "cssnano": "^5.0.13",
    "postcss": "^8.4.5",
    "postcss-import": "^14.0.2",
    "tailwindcss": "^3.0.7"
  }
}

// .postcssrc.json
{
  "plugins": {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    "tailwindcss": {},
    "autoprefixer": {},
    "cssnano": {}
  }
}

/* src-styles/styles.css */
/* 
  This is the file you work with, and it is monitored for changes. 
  See package.json below.
*/
@tailwind base;
@tailwind components;
@tailwind utilities;

// tailwind.config.js
module.exports = {
  // Replace the glob with your content files
  // This is for Zola
  content: ["./content/**/*.md", "./templates/**/*.html", "./theme/**/*.html"],
  theme: {},
  variants: {
    extend: {},
  },
  plugins: [],
}

In tailwind.config.js file, you should replace content with the path of your content files for Tailwind CSS to work properly. The content files are parsed by Tailwind. Tailwind scan the used classes in the files and dynamically creates the classes in the output file. If you wonder why the setup does not work, this is probably Tailwind is not able to scan your content files.

Now you have set up Tailwind CSS.

How to use it

Do you remember the output file in the above package.json file? The output file will be automatically updated when you keep adding classes. So you want to use this output file in your project instead of the source file.

In this example, I use Zola, I include the output file in the base template, like

<!-- Add this to the base template -->
<link rel="stylesheet" href="/css/styles.css">

Then you can npm run watch to auto compile your changes to the output file.

# Auto compile in development
npm run watch

# Use this to build the output file in CI/CD
# Or, you can commit the output file.
npm run build

Lastly, you start your development server. You can now work on your site as you normally would.

# start Zola development server
zola serve

That's it. Enjoy.