How to Setup TailwindCSS via NPM

by Ankit Maniya Apr 04, 2024 Total Views: 184

Prerequisites:

Before we begin, make sure you have the following installed:

Node.js and npm (Node Package Manager)
A code editor of your choice (e.g., Visual Studio Code, Sublime Text)

Step 1: Create a New Project

First, let's create a new directory for our project and navigate into it:

mkdir my-blog
cd my-blog

Next, initialize a new npm project:

npm init -y

Step 2: Install Tailwind CSS

Install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer

Step 3: Configure Tailwind CSS

Create a tailwind.config.js file in the root of your project to customize Tailwind CSS:

npx tailwindcss init

This will create a default configuration file that you can modify according to your needs.

Step 4: Set Up PostCSS

Create a postcss.config.js file in the root of your project to configure PostCSS:

module.exports = {
 plugins: [
  require('tailwindcss'),
  require('autoprefixer'),
 ]
}

Step 5: Create HTML Files

Create an index.html file in the root of your project. This will serve as the entry point for your Project:

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Blog</title>
   <link href="styles.css" rel="stylesheet">
  </head>
  <body>
   <div class="container mx-auto">
    <h1 class="text-3xl font-bold text-center my-8">Welcome to My Blog</h1>
    <!-- Add your blog posts here -->
   </div>
  </body>
</html>

Step 6: Create Styles

Create a styles.css file in the root of your project and import Tailwind CSS styles:

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

Step 7: Build Your Project

Now you're ready to start building your Project by adding content to your HTML files and styling it using Tailwind CSS utility classes.

<div class="max-w-2xl mx-auto mt-8">
 <h2 class="text-2xl font-bold">My First Blog Post</h2>
 <p class="text-gray-600 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec       odio. Praesent libero.</p>
</div>

Step 8: Build and Serve Your Project

To compile your CSS and serve your Project locally, you can use a development server like live-server:

npm install -g live-server

Then run:

npx tailwindcss build styles.css -o output.css
live-server

Now you can view your blog by navigating to http://localhost:8080 in your web browser.

Tags:

Please login to create comment.

Author

As a skilled and innovative Web Designer, my objective is to leverage my expertise in creating visually stunning and user-friendly websites that exceed client expectations. With a keen eye for design trends and a strong understanding of user experience principles, I aim to contribute to projects that not only meet business objectives but also leave a lasting impression on visitors. By utilizing my proficiency in HTML, CSS, JavaScript, and responsive design techniques, I aspire to craft dynamic and intuitive web experiences that elevate brands and engage audiences effectively.

- Ankit Maniya

Authors Blogs