 |
VOOZH | about |
|
VOOZH | about |
Tailwind CSS is a utility-first CSS framework that allows developers to style web interfaces directly using predefined utility classes.
Tailwind CSS can be installed in multiple ways depending on the project type. The most common and recommended approach is using Node.js and npm, as it enables full customization and optimized production builds.
Before installing Tailwind CSS, make sure you have the following installed on your system:
Step 1: Create a Project Folder
Create a new folder for your project and navigate into it:
mkdir tailwind-project
cd tailwind-project
Step 2: Initialize npm
Initialize a new npm project:
npm init -yThis creates a package.json file for managing dependencies.
Step 3: Install Tailwind CSS
Install Tailwind CSS along with PostCSS and Autoprefixer:
npm install -D tailwindcss postcss autoprefixerStep 4: Generate Configuration Files
Create the Tailwind configuration files using the following command:
npx tailwindcss init -pThis generates:
Step 5: Configure Template Paths
Open tailwind.config.js and add the paths to your template files:
module.exports = {
content: ["./*.html"],
theme: {
extend: {},
},
plugins: [],
}
This ensures Tailwind removes unused styles in production.
Step 6: Add Tailwind Directives to CSS
Create a CSS file (e.g., input.css) and add the following:
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 7: Generate Output CSS
Run the following command to build Tailwind CSS:
npx tailwindcss -i ./input.css -o ./output.css --watchThis generates the final CSS file and watches for changes.
Link the generated CSS file in your HTML file:
<link href="output.css" rel="stylesheet">Now you can start using Tailwind utility classes in your HTML.
If you want to quickly use Tailwind CSS without setting up a build process, you can include it using a CDN. This method is ideal for beginners, small projects, or quick prototypes.
Output:
Tailwind CSS can also be installed using:
