Using TailwindCSS standalone CLI

Question

I have downloaded the latest (v4.0.4) TailwindCSS standalone CLI and created the following files.

tailwind.config.js

module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.css

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p class="text-emerald-400 text-5xl font-bold">Lorem Ipsum</p>
  </body>
</html>

I started watching the CSS with

./tailwindcss -i tailwind.css -o style.css --watch
≈ tailwindcss v4.0.4

Done in 41ms

However, style.css doesn't contain the styles in my index.html page.

style.css

/*! tailwindcss v4.0.4 | MIT License | https://tailwindcss.com */
.relative {
  position: relative;
}
.mx-auto {
  margin-inline: auto;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.w-full {
  width: 100%;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.object-cover {
  object-fit: cover;
}
.text-center {
  text-align: center;
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.duration-700 {
  --tw-duration: 700ms;
  transition-duration: 700ms;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}

What am I missing here?

rozsazoltan · Accepted Answer · 2025-02-08 16:57:43Z

3

Starting from v4, the @tailwind directive has been deprecated, and instead, you should use @import "tailwindcss";. A separate CLI package has been created, so the command is now npx @tailwindcss/cli instead of npx tailwindcss. By default, the legacy JavaScript-based configuration is no longer used, but you can still use it in v4 with the @config directive.

Since some elements of your question have already been answered individually, but had to be explained together in a new compilation, I'll leave the links here from where the sources originate:

Removed @tailwind directive - StackOverflow
TailwindCSS v4 is backwards compatible with v3 - StackOverflow
New configuration option in v4 - StackOverflow
Changed npx tailwindcss to npx @tailwindcss/cli - StackOverflow

edited Feb 8 at 16:57

answered Feb 8 at 16:50

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rozsazoltan Jul 26 at 10:08

Related: Install Tailwind CSS with CLI using Standalone

Collectives™ on Stack Overflow

Using TailwindCSS standalone CLI

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related