- Instant help with your CSS coding problems

Tailwind CSS without Node.js and npm

If you want to use TailwindCSS in a project that doesn't have Node.js and can't install it for any reason, don't worry. Fortunately, the Tailwind team thought of the problem and created a standalone CLI application for this case. So you can use Tailwind without requiring Node.js and npm.

Note: You can use the Play CDN to try Tailwind without any build step, but the Play CDN is designed for development purposes only and is not the best choice for production. The solution below can be used in a production environment.

Configure TailwindCSS without using 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: [
    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


Share "Tailwind CSS without Node.js and npm" with your friends