How to Install and Use Tailwind CSS 4.1.3: A Complete Guide with Examples (React, Next.js, HTML)
Tailwind CSS 4.1.3 brings even more polish to one of the most popular utility-first CSS frameworks on the web. Whether you're working with React, Next.js, or even just static HTML, getting started with Tailwind is quick and easy. In this guide, we’ll walk through how to install Tailwind CSS 4.1.3 and use it effectively—with practical examples in different environments.
Installation Methods for Tailwind CSS 4.1.3
Tailwind can be installed in several ways depending on your setup:
1. Using Tailwind via CDN (Quick & Easy for HTML)
Perfect for quick prototypes or static sites.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CDN Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="text-center">
<h1 class="text-4xl font-bold text-blue-600">Hello, Tailwind CSS 4.1.3!</h1>
<p class="text-lg mt-2">You're now using Tailwind via CDN.</p>
</div>
</body>
</html>
⚠️ The CDN version is best for demos or learning, not for production.
2. Installing Tailwind in a React Project (with Create React App)
Step-by-step:
npx create-react-app my-app
cd my-app
npm install -D tailwindcss@latest postcss autoprefixer
npx tailwindcss init -p
Configure tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Add Tailwind to index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Example Component:
function App() {
return (
<div className="flex items-center justify-center h-screen bg-gray-100">
<h1 className="text-4xl font-bold text-purple-600">Welcome to Tailwind CSS 4.1.3!</h1>
</div>
);
}
export default App;
3. Using Tailwind with Next.js
Install Next.js and Tailwind:
npx create-next-app@latest my-next-app
cd my-next-app
npm install -D tailwindcss@latest postcss autoprefixer
npx tailwindcss init -p
Update tailwind.config.js:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Add Tailwind directives in styles/globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Example Next.js Page (pages/index.js):
export default function Home() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-blue-50">
<h1 className="text-3xl font-bold text-blue-600">Welcome to Tailwind CSS 4.1.3 with Next.js!</h1>
<p className="mt-4 text-lg text-gray-700">Build fast and style faster.</p>
</div>
)
}
Tailwind CSS 4.1.3 Highlights to Explore
- Improved warnings for unsupported CSS values.
- Better integration with Turbopack.
- Slim template and Ruby
%w()array class support.
Start Building with Tailwind CSS Today!
Whether you're creating a sleek landing page or a full-featured web app, Tailwind CSS 4.1.3 offers everything you need to move fast with consistent design.
By using Tailwind with your favorite stack—React, Next.js, or simple HTML—you get a scalable design system out of the box. So go ahead, install it, and start building responsive, beautiful user interfaces faster than ever.
Want more tips and advanced Tailwind techniques? Stay tuned for our upcoming deep dives!