Set up Tailwind CSS 3 or 4 deliberately

Tailwind turns utility class names in your source into CSS. Installation steps depend on the major version. This site uses 3.3.2; a new Tailwind 4 project uses a separate CLI package and a different CSS entry point.

Reproduce a version-3 setup

For a new practice folder with Node and npm already available:

npm init -y
npm install -D tailwindcss@3.3.2
npx tailwindcss init

Set content: ["./src/**/*.html"] in the generated tailwind.config.js. Create src/input.css:

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

Create src/index.html with a complete HTML document, a viewport meta element and <link rel="stylesheet" href="./output.css">. Put this markup inside its body:

<article class="max-w-md mx-auto p-4 border rounded">
  <h1 class="text-xl font-bold">Practice project</h1>
  <p class="mt-4">Change one utility and rebuild.</p>
</article>

Run npx tailwindcss -i ./src/input.css -o ./src/output.css --watch, then open src/index.html. Keep the process running while editing. If the card is unstyled, check the stylesheet path, build output and content paths before changing more classes.

Inspect the expected result

<article class="max-w-md mx-auto p-4 border rounded">
  <h1 class="text-xl font-bold">Practice project</h1>
  <p class="mt-4">Change one utility and rebuild.</p>
</article>

*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
a {
  color: inherit;
  text-decoration: inherit;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mt-4 {
  margin-top: 1rem;
}
.max-w-md {
  max-width: 28rem;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.p-4 {
  padding: 1rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.font-bold {
  font-weight: 700;
}

This copied document embeds its compiled styles. max-w-md is 28rem in Tailwind 3, not 24rem. This site’s custom spacing changes some keys: p-10 is 10px here, versus 2.5rem in standard version 3; p-4 remains 1rem.

A new version-4 project

The current official CLI approach installs tailwindcss@4 and @tailwindcss/cli@4, uses @import "tailwindcss"; in the input CSS, then runs npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch. Follow the official version-4 instructions for its complete example and browser requirements. Do not combine that flow with version-3 init instructions.

Keep the build understandable

Use complete class names that the scanner can find; strings assembled from fragments may not generate CSS. Read the learning plan and the Tailwind hub before adding plugins. A framework does not replace HTML semantics or CSS layout knowledge.

Sources

Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.