Introduction
Unlike traditional CSS frameworks that come with predefined components and themes, Tailwind gives you a set of small, single-purpose utility classes that you can combine directly in your HTML to style your content.
This approach allows you to quickly build custom designs without writing much custom CSS. By applying classes for things like spacing, colors, and typography directly in your HTML, you can focus on the layout and structure of your project.
Key ideas to keep in mind as you work with Tailwind:
- Utility-first: Tailwind encourages the use of small, reusable classes instead of custom CSS.
- Customization: You can easily extend or modify Tailwind to suit your needs.
- Consistency: It helps maintain a consistent style throughout your project.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework. Instead of writing custom styles in CSS files, you apply predefined utility classes directly in your HTML to style elements. Each class controls a specific aspect of your design, like color, spacing, or layout.
Instead of writing CSS like this:
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
With Tailwind, you apply classes directly in the HTML:
<button class="bg-blue-500 text-white py-2 px-4 rounded">Click me</button>
Why Use Tailwind CSS?
- Efficiency: Style directly in HTML without switching between files.
- Consistency: Utility classes help maintain a consistent design throughout your project.
- Customisation: Tailwind can be tailored to meet the specific needs of your project.
- Responsive Design: Tailwind includes built-in responsive utilities.
- Developer-Friendly: Tailwind’s utility-first approach makes code more readable and intuitive, allowing other developers to quickly understand and contribute without navigating complex custom styles.
Tailwind vs Regular CSS
Feature | Tailwind CSS | Regular CSS |
---|---|---|
Writing styles | Use utility classes in HTML | Write custom styles in CSS files |
Speed | Faster, fewer lines of code | Slower, due to custom styles |
Responsive design | Built-in responsive utilities | Requires manual media queries |
Tailwind vs Bootstrap
Feature | Tailwind CSS | Bootstrap |
---|---|---|
Design flexibility | Fully customizable with utility-first approach | Pre-designed components |
Size | Lightweight, uses only needed classes | Larger, with built-in components |
Learning curve | Requires learning utility classes | Arguably easier to use initially with pre-built styles |
Setting Up Tailwind CSS
There are multiple ways to set up Tailwind, depending on your project needs. Here, we will cover the three methods: using a CDN, Tailwind CLI, and Vite.
Option 1: Using CDN (Simple setup)
The quickest way to get started is by using a CDN (Content Delivery Network). This requires no installation but is only recommended for initially trying the library out.
- Create an HTML file.
- Add the following line inside the tag:
<script src="https://cdn.tailwindcss.com"></script>
Now, you can try using Tailwind’s utility classes in your HTML.
Note: Using the Tailwind CDN is great for quick prototyping, but it’s not recommended for production because:
- Large file size: All of Tailwind is loaded, slowing down your site since unused CSS isn’t removed.
- Limited customisation: You can’t easily modify settings like colours or fonts.
- Version risks: Always loading the latest version might cause unexpected changes.
For real projects, use one of the methods below or follow one of the framework guides.
Option 2: Setting up Tailwind CLI
For more control over your build process and customization options, you can use Tailwind’s CLI.
Install Node.js if it’s not already installed on your system.
Initialize your project. This will create a package.json file with default settings.
bash npm init -y
Install Tailwind as a dev dependency. ^3 makes sure we are installing the latest version that starts with 3:
bash npm install -D tailwindcss@^3
Create a configuration file. This will create
tailwind.config.js
.bash npx tailwindcss init
Set up Tailwind CSS: In your tailwind.config.js:
bash module.exports = { content: ["./**/*.{html,js}","!./node_modules/**/*"], theme: { extend: {}, }, plugins: [], }
The
content
array specifies the file paths that Tailwind scans to generate styles based on the classes in your HTML and JavaScript files.In the configuration above, Tailwind is set to scan all
.html
and.js
files in the project while ignoring thenode_modules
folder and its subfolders. By prefixing a path with!
you tell Tailwind to exclude that directory. This helps avoid unnecessary processing by skipping files that don’t need to be scanned, such as those in node_modules.You can adjust the content array to match wherever your HTML and JavaScript files are located.
Create a CSS file (in css/input.css for example) and add the following
directives
.css @tailwind base; @tailwind components; @tailwind utilities;
@tailwind
directives are instructions that tell the Tailwind CSS build process where to inject its generated styles into your final CSS file.base
- a set of styles that iron out browser inconsistencies.components
- this is where Tailwind will put any component classes you create later.utilities
- the actual utility classes that you use, e.g.bg-green-500
andtext-white
.
Build the CSS file.
bash npx tailwindcss -i ./css/input.css -o ./css/style.css --watch
-i
- specifies the input file-o
- specifies the output file, where the final CSS will be written to. This is where you link to from the HTML.--watch
- this ensures all changes in the files specified in the content array are watched for changes
Link to the output file:
html <link rel="stylesheet" href="./css/style.css" />
Create scripts to watch and build Tailwind
We don’t want to be entering that long command in the terminal each time, so create two scripts in
package.json
:json "scripts": { "dev": "npx tailwindcss -i ./css/input.css -o ./css/style.css --watch", "build": "npx tailwindcss -i ./css/input.css -o ./css/style.css --minify" }
Use
npm run dev
in the terminal during development andnpm run build
when deploying to a host. The--minify
flag will ensure the outputted CSS is minified, resulting in a smaller file size.
Option 3: Using Vite
Vite is a fast build tool that works well with Tailwind. Here’s how to set up Tailwind with Vite:
Create a new Vite project:
bash npm create vite@latest
Choose
Vanilla
when it asks you about which framework to use.Navigate into your project directory and open in VSCode:
bash cd your-project-name code .
Install Tailwind CSS:
bash npm install -D tailwindcss^3 postcss autoprefixer
Create a Tailwind configuration file:
bash npx tailwindcss init
Configure Tailwind: In
tailwind.config.js
, specify where your content files are located:bash module.exports = { content: ["./**/*.{html,js,ts}","!./node_modules/**/*"], theme: { extend: {}, }, plugins: [], }
Create a
postcss.config.js
in the root of the project and add this:javascript export default { plugins: { tailwindcss: {}, autoprefixer: {} } };
Add Tailwind to your CSS. In your style.css, include:
css @tailwind base; @tailwind components; @tailwind utilities;
Make sure this CSS file is being imported in
main.js
:javascript import './style.css';
Run the project in dev mode:
bash npm run dev
Utility-First Fundamentals
Tailwind’s utility-first approach means you use simple, purpose-specific classes to style elements. You don’t need to write custom stylesheets; instead, you compose your design directly in the HTML.
Example:
To create a styled button:
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded">Submit</button>
bg-green-500
- sets the background color.text-white
- makes the text white.font-bold
- sets the text to bold.py-2 px-4
- adds vertical and horizontal padding.rounded
- adds rounded corners.
VScode extensions
- Tailwind CSS IntelliSense - very useful for auto-completing Tailwind classes.
- Tailwind Fold - automatically “folds” (hides) long class attributes.