Scribd
Upload
10 views2 pages

Tailwind CSS Installation Guide

The document outlines the steps to set up Tailwind CSS in a project, starting with initializing the project and installing necessary dependencies. It includes commands to generate configuration files, create an input CSS file, and build the final output CSS. A summary table is provided to track knowledge and practice of each step.

Uploaded by

Favour Orazulike
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views2 pages

Tailwind CSS Installation Guide

The document outlines the steps to set up Tailwind CSS in a project, starting with initializing the project and installing necessary dependencies. It includes commands to generate configuration files, create an input CSS file, and build the final output CSS. A summary table is provided to track knowledge and practice of each step.

Uploaded by

Favour Orazulike
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Tailwind CSS Setup Summary

1. Initialize a Project

Command:

npm init -y

This creates a [Link] file to manage your project dependencies.

2. Install Tailwind and Dependencies

Command:

npm install -D tailwindcss postcss autoprefixer

This installs Tailwind CSS and the tools needed to build your CSS.

3. Generate Config Files

Command:

npx tailwindcss init -p

This creates:

- [Link]

- [Link]

4. Create Input CSS File

Create a file named [Link] and add:

@tailwind base;
Tailwind CSS Setup Summary

@tailwind components;

@tailwind utilities;

5. Build Tailwind Output CSS

Command:

npx tailwindcss -i ./src/[Link] -o ./dist/[Link] --watch

This compiles Tailwind into a final CSS file you can link in HTML.

Summary Table

Step | Know It? | Practice It?

------------------------------|----------|---------------

`npm init -y` | Yes | Yes

Install Tailwind & deps | Yes | Yes

`npx tailwindcss init -p` | Yes | Yes

Create [Link] | Yes | Yes

Build Tailwind CSS | Yes | Yes

You might also like