Embracing the Magic of Tailwind CSS: A Beginner’s Journey
As a budding tech enthusiast, my journey with @TIIDELab led me to the enchanting world of Tailwind CSS. At first, using this powerful framework seemed like an overwhelming task, and I found myself struggling to grasp its concepts. But, determined not to be deterred, I delved deeper into the magic of Tailwind CSS. After hours of perseverance and learning, I finally unlocked the secret to seamless installation and configuration. Now, I’m eager to share my newfound knowledge with fellow beginners, offering a guiding light to make their experience with Tailwind CSS a smooth and enjoyable one. So, let’s embark on this adventure together and discover the wonders of Tailwind CSS! 🚀
Introduction:
In the ever-evolving world of web development, finding the right tools to enhance your workflow is crucial. Tailwind CSS is a powerful utility-first CSS framework that empowers developers to easily build stylish and responsive websites.
To learn about Tailwind CSS, you must first understand HTML and CSS. Though not as a professional but at least the basics for building layouts.
What is Tailwind CSS?
Tailwind CSS is a highly customizable and low-level CSS framework that focuses on utility classes. It offers a vast collection of pre-designed utility classes that can be combined to create complex layouts and styles without writing custom CSS. The utility-first approach allows developers to achieve consistent designs and faster development while maintaining a smaller file size.
Getting Started:
To work with Tailwind, you need to first install Node.js in your local system. It is advisable to download the recommended version: https://nodejs.org/en
To begin, you need a code editor preferably visual studio code because of its beginner friendliness: https://code.visualstudio.com/download, and also a web browser such as google chrome because of its larger library of extensions than any other browsers: https://www.google.com/chrome/.
After the installation of your visual studio code, you can go ahead and open up the extension span on the left-hand side and search for: Tailwind CSS Intellisense and live server and install.
Create an empty folder on your VS code and start tailwind installation.
There are two ways to get started with Tailwind, the first is by using the play CDN option which is the fastest and easiest way but can only be used basically for learning or development. It involves adding the tailwind script tag on the head section of your HTML file as follows:
<head> of your HTML file, and start using Tailwind’s utility classes to style your content.You can also add the config objects on your script tag as follows:
tailwind.config object to customize your configuration with your design tokens.For actual deployment and production, we use the tailwind CLI which involves installing the tailwind on our system and having it watch the HTML files we are working on. It will compile any tailwind classes we use by compiling a static stylesheet that we can include in our HTML. In a way of saying:
Install Tailwind CSS via npm or yarn, and create a new project. Include the Tailwind CSS stylesheet in your HTML file, and you’re ready to go! You can also configure your project to customize colors, typography, spacing, and more, tailoring the framework to your specific needs.
Steps to the CLI installation:
Step 1: Set Up a New Project First,
create a new project folder and navigate into it using your terminal or command prompt.
Step 2: Initialize Your Project
Initialize your project by running the following command on your VS terminal:
npm init -yThis command will create a package.json file in your project folder.
Step 3: Install Tailwind CSS
Next, install Tailwind CSS and its dependencies by running the following command:
npm i -D tailwindcssThis command creates a node module folder which has all the dependencies for tailwind
Step 4: Create Configuration Files
After installing the dependencies, create a configuration file in the root of your project by running this command:
npx tailwindcss initThis command creates the file: tailwind.config.js
In tailwind.config.js, you can customize various aspects of Tailwind CSS, such as colors, fonts, and breakpoints. Here's a basic example:
// tailwind.config.js
module.exports = {
theme: {
extend: {},
},
variants: {}, plugins: [],
}We need to tell Tailwind where to look for the utility classes in our project files. For example, the code below is telling the tailwind to look at the source folder and then look at any HTML and JavaScript files inside it.
It is not mandatory to use any source folder, we can just put our files in the root directory and include the paths on the content object of the tailwind.config.js file like this:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}Step 5: Create a CSS File
Create a new CSS file (e.g., styles.css) in your project folder. This is where you'll import Tailwind CSS styles and any additional custom styles.
Step 6: Import Tailwind CSS In your styles.css file,
import Tailwind CSS by adding the following line:
/* styles.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';Tailwind watches those files, compiles them, and gives us everything in the tailwind config.
Step 7: Build Your CSS
Next, compile your CSS file using a build tool like Parcel or Webpack. If you don’t have a build tool set up, you can use the following command to build your CSS:
npx tailwindcss -i styles.css -o output.css --watchRunning this command means we want Tailwind CSS to read the styles.css file, process it to apply the utility classes, and then save the compiled CSS in the output.css file. The watch mode will keep running, so any changes you make in styles.css will trigger an automatic recompilation and update the output.css file. This way, you can easily see the changes you make to your CSS without the need for manual recompilation each time.
If you don’t want to build your CSS by running the above code, you can just Add a “build” script to your package.json to process your CSS file using Tailwind CSS:
Modify your package.json to include the following:
Step 8: Run the build script in your terminal to generate the final CSS file with Tailwind styles:
npm run buildStep 9: You should now have an output.css file in your project directory, which contains all the Tailwind CSS classes.
Step 10: Link the output.css file in your HTML file to apply Tailwind CSS styles to your project:
<link rel="stylesheet" href="output.css">Step 11: You’re all set! You can now start using Tailwind CSS classes in your HTML to style your project.
Using utility classes in Tailwind CSS is one of the main features that make it so powerful and easy to use. Utility classes are pre-defined CSS classes that provide specific styling and can be directly applied to HTML elements to style them without the need to write custom CSS.
Here are some examples of how to use utility classes in Tailwind CSS:
- Text Color:
To change the text color of an element, you can use the “text-{color}” class, where “{color}” is the desired color name or hexadecimal value. For example:
2. Padding and Margin:
You can control the padding and margin of an element using classes like “p-{size}” and “m-{size}”, where “{size}” is a number representing the desired padding or margin in pixels or as a specific size. For example:
3. Responsiveness:
Tailwind CSS makes it easy to create responsive designs with classes like “sm:”, “md:”, and “lg:” to apply specific styles on different screen sizes. For example:
4. Hover and Focus:
You can apply styles on hover and focus using classes like “hover:” and “focus:”. For example:
5. Rounded Corners:
To add rounded corners to an element, you can use the “rounded-{size}” class, where “{size}” is a number representing the desired corner radius. For example:
These are just a few examples of how you can use utility classes in Tailwind CSS. There are many more utility classes available that you can explore in the Tailwind CSS documentation to make styling your website faster and easier.
Below is the link to Tailwind CSS documentation and also a link to a portfolio site I built using Tailwind CSS
https://personal-portfolio-roan-seven.vercel.app/cc
Conclusion:
Embracing the magic of Tailwind CSS has empowered me to craft beautiful websites with efficiency and confidence. As I continue to explore and expand my skills, I am excited to see where this journey takes me and the incredible creations I can bring to life with Tailwind CSS.
To all my fellow beginners out there, I encourage you to embark on this magical journey with Tailwind CSS. Embrace the simplicity, harness the power, and let your creativity flourish with this remarkable utility-first CSS framework. Happy coding!