{{ $('Map tags to IDs').item.json.title }}
How to Set Up Tailwind CSS in a Project
Tailwind CSS is a utility-first CSS framework that helps you build custom user interfaces quickly by providing a set of CSS classes. In this tutorial, you’ll learn how to set up Tailwind CSS in a new or existing project.
Prerequisites
- Basic knowledge of HTML and CSS.
- A text editor (e.g., Visual Studio Code) for editing your files.
- Node.js installed on your system (if using npm).
1. Setting Up Tailwind CSS via npm
This method is ideal for projects that require build tools like Webpack or Parcel.
1.1. Initialize Your Project
First, create a new directory for your project and navigate into it:
mkdir my-project
cd my-projectThen, initialize a new npm project:
npm init -y1.2. Install Tailwind CSS
Install Tailwind CSS and its required dependencies:
npm install tailwindcss postcss autoprefixer -D1.3. Create Tailwind Configuration Files
Generate the Tailwind configuration file and PostCSS configuration file:
npx tailwindcss init -p1.4. Configure Tailwind
In the generated tailwind.config.js file, specify the paths to all of your template files:
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {},
},
plugins: [],
};1.5. Add Tailwind to Your CSS
Create a new CSS file (e.g., styles.css) in your src directory and include the Tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;1.6. Compiling Your CSS
Add a build script to package.json to compile your CSS:
"scripts": {
"build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}Run the following command to start the build process:
npm run build2. Setting Up Tailwind CSS via CDN
If you prefer a quicker setup and are working on a smaller project or prototype, you can use a CDN to include Tailwind CSS directly in your HTML.
2.1. Include Tailwind CSS via CDN
Add the following line inside the <head> of your HTML file:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">3. Using Tailwind CSS
Now you can start using Tailwind’s utility classes in your HTML:
<div class="bg-blue-500 text-white p-4 rounded"
<h1 class="text-2xl font-bold">Hello, Tailwind!</h1>
</div>4. Conclusion
By following this tutorial, you have successfully set up Tailwind CSS in your project using either npm or CDN. Tailwind CSS allows for rapid UI development with its utility-first approach. Explore Tailwind’s extensive documentation to discover more features and utilities to enhance your web design.
About the Author
