Tailwind CSS v4 is a powerful utility-first CSS framework that helps you rapidly build custom designs. If you're looking to set up Tailwind CSS v4 using the Tailwind CLI (Command Line Interface), this guide will walk you through every step of the process.
Step 1: Create Your Project Folder
The first step in setting up Tailwind CSS v4 is to create a project folder. You can do this by navigating to your desired location and running the following commands:
mkdir my-tailwind-project
cd my-tailwind-project
Replace my-tailwind-project with your desired project name.
Step 2: Initialize the Project with npm
Once inside your project folder, initialize it as a Node.js project by running:
npm init -y
This creates a package.json file, where all your project dependencies will be stored.
Step 3: Install Tailwind CSS v4 and Tailwind CLI
With your package.json file ready, install Tailwind CSS v4 and the Tailwind CLI tool by running:
npm install tailwindcss@4 @tailwindcss/cli
This installs the necessary dependencies, specifically Tailwind CSS v4 along with the CLI tool to compile your styles.
Step 4: Create the Input CSS File
Now, create a file for Tailwind to be imported into. First, make the src directory and then create the input.css file:
mkdir src
touch src/input.css
Open src/input.css and add the following line to import Tailwind CSS:
@import "tailwindcss";
This file will now include the Tailwind styles when compiled.
Step 5: Set Up Your HTML File
Create an index.html file inside the srcdirectory:
touch src/index.html
Open src/index.html and add this basic HTML structure:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
<title>Tailwind Project</title>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hey coders, it's Sharan here, diving into Tailwind CSS v4!
</h1>
</body>
</html>
This structure links to the output.css file that will be generated once we compile the Tailwind styles.
Step 6: Compile Tailwind CSS Using the CLI
To compile the CSS, run the Tailwind CLI with the following command:
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
This will:
-i ./src/input.css: Specify the input file (your input.css with Tailwind's imports).-o ./src/output.css: Specify the output file (where the compiled CSS will be saved).--watch: Automatically recompiles the CSS when changes are made.
Once the process runs, it will generate the output.css file in your src directory containing all of Tailwind’s utility classes.
Step 7: Open Your Project in a Live Server
Now that your CSS is compiled, you can open your index.html file in a live server. If you're using Visual Studio Code, you can install the "Live Server" extension to view your project in the browser with live reloading.
Step 8: Set Up IntelliSense for Tailwind CSS
To make it easier to work with Tailwind CSS, especially for autocompletion and suggestions, install the Tailwind CSS IntelliSense extension in your code editor (e.g., VS Code).
Additionally, create a tailwind.config.js file in your project folder to further customize your Tailwind configuration. Run the following command to generate the file:
touch tailwind.config.js
npx tailwindcss init
This configuration file allows you to extend or modify the default settings of Tailwind CSS.
Step 9: Enjoy the Tailwind Experience
That’s it! You have successfully set up Tailwind CSS v4 in your project using the Tailwind CLI. Now, you can start building your project using Tailwind’s utility-first approach to styling.
Conclusion
With Tailwind CSS v4 and the Tailwind CLI, you’re all set to create custom designs efficiently. 🚀 Customize your project with the configuration file, and enhance your workflow with Tailwind CSS IntelliSense. 🎨
Happy coding! 👨💻👩💻
Top comments (0)