Getting Started with Tailwind CSS: A Quick Guide
Introduction
In the ever-evolving world of web development, embracing change is crucial. While some may resist, exploring new tools can lead to exciting discoveries.
I will start by giving you good reasons to try Tailwind CSS. If you're interested, I will further guide you through a fun installation process, cover the basics, and demystify some common myths about TailwindCSS in the end.
You ready?
Why TailwindCSS?
Imagine Building Your Dream House: Traditional CSS is like meticulously crafting every detail of your dream house – a labor-intensive process.
In contrast, Tailwind CSS is your toolbox of pre-built styles. It's like having a skilled construction team ready to execute your vision.
You stay in control as the architect, effortlessly making changes while Tailwind handles the finer details.
With a single class name, you can kiss goodbye to multiple lines of code stress! 😄
Take a look at this plain CSS style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<style>
/* Additional styles for illustration purposes */
.parent-element {
position: relative;
width: 200px;
height: 200px;
background-color: lightgray;
}
.child-element {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: blue;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="parent-element">
<div class="child-element inset-0">
This is a child element inset into its parent.
</div>
</div>
</body>
</html>
but with tailwindcss over 30+ lines of code can be reduced to just 4 lines
<div class="relative parent-element">
<div class="child-element absolute inset-0">
This is a child element inset into its parent.
</div>
</div>
Setting up Tailwindcss in your project
Have you ever heard that setting up Tailwind CSS is a real headache? Well, guess what? We're here to prove that wrong!
If you're eager to dive right in without delving into the nitty-gritty details, you can simply follow Tailwind CSS's installation guide. But if you want to uncover the magic behind the scenes and set things up yourself, then stick around for the full ride!
Note: I will be using the Vscode as my code editor and its integrated terminal
Recall our illustration of building your dream house. Well, we will continue in our fantasy.
The dream house is the project you aim to build.
Step 1: Create an empty folder and open it up with your text editor (VScode preferably)
Step 2: Open up the terminal.
Windows: Press
Ctrl + `(backtick/accent grave key, usually located above the Tab key).macOS: Press
Cmd + `(backtick/accent grave key, usually located above the Tab key).
You will see the path to your project directory
The next thing is to bring in our construction materials to build our dream house (project).
In your terminal
Step 3: Install Tailwindscc to your project
npm install -D tailwindcss
As a master builder, you have an assistant called npm (Node Package Manager, a tool for managing software packages) that can help you fetch (install) your tools (tailwindcss package).
Hmm, what is -D. In technical terms, it is a flag for npm to store the package as a development dependency. You are simply saying the development process is dependent on this package, but it is not needed in production (of course, you don't want to live with the hammer and nails used to build your house).
You should see a
node_modules folder
package-lock.json file
package.json
(Optional: If you like your files and folder to have these beautiful icons, install vscode-icons extension)
npx tailwindcss init
Think of npx as a magical word to fetch tools (construction materials) from your package. You use that magic word to initialize (init) tailwindcss.
It will bring up a file named tailwind.config.js
Step 4. Configure your template paths (
tailwind.config.js)
Before setting up the config file, create a folder named 'src'. This src (source) folder will contain your necessary source code (HTML, CSS, javascript files, and asset folder)
Your file tree should look similar to this
src/
├── index.html
├── input.css
├── script.js
└── assets/
└── images/
Please note that you can give any name to these files, just make sure that you are consistent in their usage.
Now add the paths to all of your template files in your tailwind.config.js file. This will tell tailwind where the utility classes should work.
The only addition is to the content (for now).
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
content: ["./src/**/*.{html,js}"] tells Tailwindcss where to find the HTML and JavaScript files that may contain class references, so it knows which styles to generate (it is like saying I want to use these tools(utility classes) in a particular place).
Theme: For customizing default styles like colors, fonts, and spacing provided by Tailwind CSS. In this example, no customizations are made (set to { extend: {} }) for now.
Plugins: To add external plugins or extensions to enhance Tailwind CSS.
Step 5: Add the Tailwind directives to your CSS
In your input.css file, add the tailwindcss directives
@tailwind base;
@tailwind components;
@tailwind utilities;
Think of these directives as smaller groups of your construction materials, they contain tools (styles) that you will use in your project.
Step 6: Start the Tailwind CLI build process
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Don’t fret; it's simple. You’re using your magic word to command Tailwind, hey, look into my input (-i) folder, the source folder you created earlier (./src/input.css). pick out my input.css file specifically.
./src means it's in the same directory as your config file. /input.css is the CSS file in your src folder.
Now, -o is telling Tailwind where to arrange (output) the tools (styles), which are to ./dist/output.css, a ‘dist’ (destination) folder in the same directory as your config.
You don’t need to worry about manually creating this folder; it will magically create the dist folder for you when you run npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch in your terminal. (dist folder can be called any name too).
Why is that?
Don't forget that in our input.css we have the Tailwind derivatives which we said are like smaller groups of our construction materials. Well, you want to unbox (build) to be able to use them right? That was what we just did.
The the new output.css, is your compiled CSS, it typically see a large CSS file that includes all the styles generated based on your configuration and the utility classes. This output.css file is what you want to use in your HTML.
Step 7: Start Using Tailwind in your HTML
Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Open in your browser, you should see a large text 'HELLO WORLD!' boldened and underlined.
That is it you are done, you can start using Tailwind in your project.
Optional
Extensions that will make your life easier
Install all the named extensions from your extension pannel at the sidebar
Live Server: is a tool that shows your website changes in real-time as you edit the code, making web development faster and easier.
Tailwind CSS IntelliSense: Tailwind CSS IntelliSense is a tool that helps web developers work with Tailwind CSS more efficiently. It provides suggestions and autocompletions for Tailwind CSS classes while you're writing code, making it easier to find and use the right styles. It's like having a helpful assistant that speeds up the process of styling your web pages with Tailwind CSS.
%[https://giphy.com/gifs/e3VeMjbFA2rXXtzrP4]
Inline fold: The extension allows you to collapse or hide sections of code within your text editor, such as Visual Studio Code. It lets you condense or "fold" parts of your code so that you can focus on the sections you're currently working on, making it easier to navigate and read your code. This can be particularly helpful for long or complex files, as it helps declutter your workspace and improve code organization.
%[https://giphy.com/gifs/3rWeRGPUzSvmIPSmnn]
Color Highlight: a tool that makes it easier to identify and work with colors in your code by highlighting them with their respective color values.
Got any cool extensions up your sleeve? Share 'em in the comments below! et's level up our coding game and have a blast doing it! 💥😄
