Introduction to Tailwind CSS

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

Tailwind vs Bootstrap

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.

1. Create an HTML file.
2. 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.

1. Install Node.js if it’s not already installed on your system.

2. Initialize your project. This will create a package.json file with default settings.

   bash Copy

   	npm init -y

3. Install Tailwind as a dev dependency. ^3 makes sure we are installing the latest version that starts with 3:

   bash Copy

   	npm install -D tailwindcss@^3

4. Create a configuration file. This will create tailwind.config.js.

   bash Copy

   	npx tailwindcss init

5. Set up Tailwind CSS: In your tailwind.config.js:

   bash Copy

   	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 the node_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.

6. Create a CSS file (in css/input.css for example) and add the following directives.

   css Copy

   	@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 and text-white.

7. Build the CSS file.

   bash Copy

   	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

8. Link to the output file:

   html Copy

   	<link rel="stylesheet" href="./css/style.css" />

9. 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 Copy

   	"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 and npm 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:

1. Create a new Vite project:

   bash Copy

   	npm create vite@latest

   Choose Vanilla when it asks you about which framework to use.

2. Navigate into your project directory and open in VSCode:

   bash Copy

   	cd your-project-name
   	code .

3. Install Tailwind CSS:

   bash Copy

   	npm install -D tailwindcss@^3 postcss autoprefixer

4. Create a Tailwind configuration file:

   bash Copy

   	npx tailwindcss init

5. Configure Tailwind: In tailwind.config.js, specify where your content files are located:

   bash Copy

   	module.exports = {
   		content: ["./**/*.{html,js,ts}","!./node_modules/**/*"],
   		theme: {
   			extend: {},
   		},
   		plugins: [],
   	}

6. Create a postcss.config.js in the root of the project and add this:

   javascript Copy

   	export default {
   	  plugins: {
   	    tailwindcss: {},
   	    autoprefixer: {}
   	  }
   	};

7. Add Tailwind to your CSS. In your style.css, include:

   css Copy

   	@tailwind base;
   	@tailwind components;
   	@tailwind utilities;

8. Make sure this CSS file is being imported in main.js:

   javascript Copy

   	import './style.css';

9. Run the project in dev mode:

   bash Copy

   	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.