18

To use TailwindCSS, I need to have Node.js and npm in order to install it via npm install tailwindcss @tailwindcss/cli.

However, I don't have the option to use Node.js and npm, so I'm looking for a workaround that would allow me to use the Tailwind CLI without having to install Node.js and npm.

I tried loading the tailwindcss.js file available from CDN servers as a module script, but I wasn't successful.

<script type="module">
import tailwindcss from 'https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/tailwindcss.js';
</script>

Is it possible to use TailwindCSS without Node.js and npm?

4

9 Answers 9

10

You can use tailwind CDN. Add these following lines to the <head></head> tag of your HTML page

<head>    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
Sign up to request clarification or add additional context in comments.

3 Comments

Related for TailwindCSS v4 without Node.js: Guide for TailwindCSS v4 Standalone (executables)
Although many recommend using the Play CDN version, it is published exclusively for playgrounds and should not be used in production projects at all. This is not a personal opinion, but a fact: Why stop using Play CDN for production
People should not be using JS CDNs at all: shkspr.mobi/blog/2020/10/… httptoolkit.com/blog/public-cdn-risks
4

Tailwind actually released a tool at the end of 2021, which is called Standalone CLI. You can download it here (Official Tailwind Page).

You don't need to install npm to use it, since it's a standalone executable!

Comments

3

You can use the Standalone CLI TailwindCSS tool, you can read more about it in this link.

Basically is the TailwindCSS NPM package but distributed in a .exe file.

It is optimal for production, development and test environments unlike the CDN distribution, which is not optimal for production use at all and is only recommended for use in test and development environments

Comments

2

Install and configure tailwindCSS executable:

mkdir ~/.tailwindcss; cd ~/.tailwindcss/
mkdir bin; cd bin
# this works for arm64, check docs for other arch
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss
  • add to your .zshrc or .bashrc:
# tailwindcss
export PATH=$PATH:~/.tailwindcss/bin

Now you can use tailwindcss

tailwindcss --help

Comments

1

For development and/or testing purposes you could use tailwindcss's "Play CDN" option. You can find instructions for that at:

https://tailwindcss.com/docs/installation/play-cdn

For production use you'll really want to follow their instructions here:

https://tailwindcss.com/docs/installation

You'd do that on your desktop/laptop computer or wherever you're developing locally, not on your server. Then run the CLI build process. That process will generate the CSS files you actually include in your HTML.

You don't need to install Node.js and npm on your server. You just need it on your development machine, then you upload the generated files to your server (or however you deploy your code when it's ready for production).

Disclaimer: I'm not an expert with using tailwindcss or even Node.js, I'm just getting into it after having written CSS/JS/HTML by hand for many, many years.

1 Comment

0

use

<script src="https://cdn.tailwindcss.com"></script>

in your document <head></head> tag

1 Comment

0

Just wanted to share that for those on macOS or Linux looking for a Homebrew installation of the Tailwind CSS Standalone CLI (no Node.js needed!), we've set up a tap:

https://github.com/Aureuma/homebrew-tailwindcss

brew install aureuma/tailwindcss/tailwindcss-standalone  

Hope this helps some folks out!

Comments

0

Just use official TailwindCSS v4 Standalone executables for Windows, macOS or Linux.

Source: Guide for TailwindCSS v4 Standalone (executables)

Download

Manually, you can download the appropriate executable using the following links:

Or, automatically, you can use the same links to generate the executable directly in CMD and rename it to tailwindcss, on any system:

Windows

Option 1: PowerShell

# Download Tailwind CSS standalone
Invoke-WebRequest -Uri "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe" -OutFile "tailwindcss.exe"
# Make it executable (if needed)
# No additional permissions needed on Windows

Option 2: Command Prompt

REM Download Tailwind CSS standalone using curl (Windows 10 1803+)
curl -L -o tailwindcss.exe https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe

macOS

For ARM (M1/M2/M3)

# Download for macOS ARM (M1/M2/M3)
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

For Intel

# Download for macOS Intel
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64
chmod +x tailwindcss-macos-x64
mv tailwindcss-macos-x64 tailwindcss

Linux

For x64

# Download for Linux x64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
chmod +x tailwindcss-linux-x64
mv tailwindcss-linux-x64 tailwindcss

For ARM64

# Download for Linux ARM64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64
chmod +x tailwindcss-linux-arm64
mv tailwindcss-linux-arm64 tailwindcss

Usage

Note: The usage example is based on the automation setup, so I'm assuming your downloaded file is named either tailwindcss or tailwindcss.exe.

At this point, you can't use it globally yet, but you can already run it with /path/to/tailwindcss. Let's assume you downloaded it into the same folder as your project - in that case, you can access it directly using ./tailwindcss (or ./tailwindcss.exe).

(I'll cover how to make it globally accessible at the end of the answer.)

Import Tailwind in your CSS

Traditionally, for every TailwindCSS v4 project, place the required CSS imports in your project's main CSS file.

./src/input.css

@import "tailwindcss";

Start the Tailwind CLI build process

Now, just like when running the Tailwind CLI installed via npm, you can use the downloaded executable file with similar flags. Run the executable CLI tool to scan your source files for classes and build your CSS.

./tailwindcss.exe -i ./src/input.css -o ./output.css --watch

Tip: With the --watch flag, the command runs continuously until stopped and regenerates output.css on every file change. Without the flag, the command runs only once.

Start using Tailwind in your HTML

You need to reference the generated output.css properly in your main HTML file.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

How to use executable globally

Windows

To use the downloaded executable globally on Windows, it's best to place it in a folder separate from your project - for example, C:\bin or something similar, where you can keep all such executables.

After that, add the chosen folder to your PATH environment variable; and tailwindcss.exe can be run from anywhere.

macOS and Linux

On macOS and Linux, simply copy the file to /usr/local/bin. Or, if you don't have permission, you can use an alternative folder, e.g.: ~/bin.

After that, the tailwindcss can be run from anywhere.

Comments

0

Note: This answer is only useful for playgrounds or quick demos. If you are developing a production project, do not use the TailwindCSS CDN version, as it regenerates the output on the client every time the page reloads, slows down page loading, prevents effective caching, and causes many other issues.

Play CDN for playgrounds (don't use for production)

TailwindCSS v4 (CSS-first configuration access)

Starting from v4, cdn.tailwindcss.com running under its own domain is discontinued; instead, the TailwindCSS CDN version is distributed via the well-known cdn.jsdelivr.net.

However, from v4 onwards, the package named tailwindcss has been split into multiple parts, such as @tailwindcss/cli, @tailwindcss/postcss, or @tailwindcss/vite. The CDN version also comes as a separate package called @tailwindcss/browser.

After importing, TailwindCSS syntax can be used directly in the appropriate <style> tag. There is no need for an @import "tailwindcss"; declaration - if it is missing, the CDN automatically handles it.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
}
</style>

<div class="w-48 h-12 bg-midnight text-tahiti text-2xl">
  Hello World
</div>

Special versioning is done using the @ symbol:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]"></script>
<style type="text/tailwindcss">
@theme {
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
}
</style>

<div class="w-48 h-12 bg-midnight text-tahiti text-2xl">
  Hello World
</div>

Preflight can of course be disabled:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

@theme {
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
}
</style>

<div class="w-48 h-12 bg-midnight text-tahiti text-2xl">
  Hello World
</div>

TailwindCSS v3 (JS-based configuration access)

Some answers have already mentioned that for TailwindCSS v3 versions, cdn.tailwindcss.com can be used. By including it, you can use the latest v3 version.

This also allows us to temporarily simulate a tailwind.config.js using a tailwind.config JavaScript object. Providing content property is not possible in a meaningful way.

tailwind.config = {
  theme: {
    extend: {
      colors: {
        midnight: '#121063',
        tahiti: '#3ab7bf',
      },
    },
  },
}
<script src="https://cdn.tailwindcss.com"></script>

<div class="w-48 h-12 bg-midnight text-tahiti text-2xl">
  Hello World
</div>

Special versioning is done using the / symbol:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        midnight: '#121063',
        tahiti: '#3ab7bf',
      },
    },
  },
}
<script src="https://cdn.tailwindcss.com/3.0.0"></script>

<div class="w-48 h-12 bg-midnight text-tahiti text-2xl">
  Hello World
</div>

TailwindCSS v2 (Precompiled CSS without configuration)

v2 was primarily shipped through the unpkg.com CDN and had a much more limited scope - it only provided a precompiled, non-configurable stylesheet:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="w-48 h-12 bg-blue-600 text-green-200 text-2xl">
  Hello World
</div>

Special versioning is done using the @ symbol:

<link href="https://unpkg.com/tailwindcss@^2.0.0/dist/tailwind.min.css" rel="stylesheet">

<div class="w-48 h-12 bg-blue-600 text-green-200 text-2xl">
  Hello World
</div>

TailwindCSS v1 (Precompiled CSS without configuration)

v1 was primarily shipped through the unpkg.com CDN and had a much more limited scope - it only provided a precompiled, non-configurable stylesheet:

<link href="https://unpkg.com/tailwindcss@^1/dist/tailwind.min.css" rel="stylesheet">

<div class="w-48 h-12 bg-blue-600 text-green-200 text-2xl">
  Hello World
</div>

Special versioning is done using the @ symbol:

<link href="https://unpkg.com/tailwindcss@^1.0.0/dist/tailwind.min.css" rel="stylesheet">

<div class="w-48 h-12 bg-blue-600 text-green-200 text-2xl">
  Hello World
</div>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.