Tailwind CSS without Node.js and npm

You can configure TailwindCSS without using Node.js and npm as follows:

Step 1.

First, download the latest standalone CLI TailwindCSS executable from GitHub and copy it into your project folder. For convenience, you may want to rename the downloaded file to tailwindcss or tailwindcss.exe on Windows.

Step 2.

The next step is to create the tailwind.config.js configuration file, which you can do by running the tailwindcss init command. The generated configuration file looks like this:

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

You need to configure where your template and HTML files are located in the content array. You can list several entries here, separated by commas.

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

Tailwind will parse these locations and files and extract the CSS class names used.

Step 3.

Then add the @tailwind directives to the main CSS file. It should look something like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

.my-legacy-class {
    padding: 5px;
    margin: 5px;
    background: red;
}

With this step the basic setup is ready.

Step 4.

Now, you have to run the CLI command to generate the appropriate CSS file.
All you need to do is specify the input CSS file and the desired output CSS file as command line parameters:

tailwindcss.exe -i style/input.css -o style/main.css

For ease of development, you may want to use the --watch parameter. In this case, tailwind automatically runs the CSS generation for each file change:

tailwindcss.exe -i style/input.css -o style/main.css --watch

For a production environment, the --minify option generates a minimised CSS file:

tailwindcss.exe -i style/input.css -o style/main.css --watch --minify