Getting Started with Tailwind CSS
Last Updated : 01 Apr, 2024
Tailwind CSS is a popular utility-first CSS framework that can help you create modern and responsive web designs quickly and easily. While you can download and use Tailwind CSS locally in your project, you can also use it with a CDN (Content Delivery Network) in your HTML project. Basically Tailwind CSS provides the CSS classes that has some styling involved by adding those classes into your code or project we can inherit or add those styling into out project. This helps us to create a project without help of vanilla CSS.
This allows you to include the necessary CSS and JS files from the CDN instead of downloading them, which can help improve your website's loading time and performance. This article is a beginner's guide to Tailwind CSS in React projects, covering installation, basic concepts, and usage examples.
Pre-requisites
Basics of Tailwind CSS
The basic CSS that we must know so that we can implement it to our daily projects are these:
How to use Tailwind CSS?
Using CDN Link:
Using Tailwind CSS via CDN link allows you to quickly include Tailwind CSS in your HTML file without the need for any installation or setup. Simply add the Tailwind CSS CDN link to the <head> section of your HTML file, and you can start using Tailwind CSS utility classes immediately.
CDN link:
<script src="https://cdn.tailwindcss.com"></script>
Using Package Manager:
To use Tailwind CSS in your HTML project via a package manager like npm, you need to install Tailwind CSS as a dependency. After installation, you can include Tailwind CSS in your HTML file using a <link> tag. This approach allows for customization of Tailwind CSS configuration and tree shaking to optimize the final CSS bundle size
Step 1: Initialize a new HTML project or navigate to your existing project directory.
mkdir my-tailwind-project
cd my-tailwind-project
Step 2: Initialize a new npm project (if you haven't already):
npm init -y
Step 3: Install Tailwind CSS and its dependencies:
npm install tailwindcss postcss-cli autoprefixer
Step 4: Create a tailwind.config.js file to customize Tailwind (optional):
npx tailwindcss init
Step 5: Create a postcss.config.js file to process your CSS with Tailwind:
// postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
Example: Create your HTML file (e.g., index.html) and include Tailwind classes:
HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { clifford: "#da373d", }, }, }, } </script> </head> <body> <h1 class="text-3xl font-bold underline text-clifford"> Hello world! </h1> </body> </html>
Output: Open the HTML file in a browser to See the Below Output
.gif)
HTML with Tailwind CSSAdvantages of Using Tailwind CSS
- Rapid Development: Speed up your development workflow with pre-built utility classes.
- Flexibility: Customize styles without leaving your HTML file, offering unparalleled flexibility.
- Scalability: Easily scale your projects by reusing utility classes for consistent styling.
- Responsive Design: Tailwind provides built-in classes for responsive design, ensuring your application looks great on any device.
How to Use Tailwind CSS in a Project?
- Installation: Install Tailwind CSS via npm or yarn.
- Configuration: Create a configuration file to customize Tailwind according to your project's needs.
- Integration: Integrate Tailwind CSS into your build process or use it within your preferred build tools.