NewIncredible offer for our exclusive subscribers!Read More
November 10, 2024
Uncategorized

How to configure Tailwind by npm?

  • September 12, 2024
  • 4 min read
  • 144 Views
How to configure Tailwind by npm?

1. Set Up a New Project

Open your terminal in the VS Code project directory or create a new project.

For a new Node.js project:

mkdir my-tailwind-project
cd my-tailwind-project
npm init -y

2. Install Tailwind CSS via npm

Install Tailwind CSS and its dependencies with the following command:

npm install -D tailwindcss postcss autoprefixer

3. Create Configuration Files

Generate tailwind.config.js and postcss.config.js by running:

This will generate:

  • tailwind.config.js: Tailwind configuration
  • postcss.config.js: PostCSS configuration for processing CSS

4. Set Up the Content Paths

Open tailwind.config.js and define the content paths to your files (HTML, JS, etc.):

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

5. Create Your CSS File

Create a CSS file in your project directory (e.g., src/input.css) and import Tailwind’s base, components, and utilities:

mkdir -p src
touch src/input.css

Add this to src/input.css:

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

6. Build Tailwind CSS

Add the build command to your package.json. This will process your CSS and generate the final output.

How about this: “Open your package.json file and add the following script:

"scripts": {
  "build:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}

7. Create HTML File

You can create an HTML file in the src directory to use Tailwind classes. Example:

Sample content for src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../dist/output.css" rel="stylesheet">
    <title>Tailwind CSS Setup</title>
</head>
<body class="bg-gray-100 text-center">
    <h1 class="text-3xl font-bold text-blue-500">Hello Tailwind CSS!</h1>
</body>
</html>

8. Build and Watch for Changes

Run the following command to build Tailwind CSS and watch for changes:

This command will:

  • Read your src/input.css
  • Process it through Tailwind and PostCSS
  • Output the final CSS into dist/output.css

9. Install VS Code Extensions

(Optional but recommended):

  • Tailwind CSS IntelliSense: Autocompletes and offers helpful hints for Tailwind classes.

10. Use Live Server

To view your HTML changes in real-time, you can use the Live Server extension or run a simple server using the terminal:

This will start a local server, allowing you to view changes instantly in your browser as you modify your Tailwind CSS.

conclusion – This installs Tailwind CSS, along with PostCSS and Autoprefixer, as development dependencies. After installing, you can configure and build your CSS files by setting up the necessary configuration files (tailwind.config.js and postcss.config.js) and using the appropriate build scripts. This process integrates Tailwind CSS into your project for streamlined utility-first CSS styling.

About Author

shivam

Leave a Reply

Your email address will not be published. Required fields are marked *