Tailwind CSS Guide For Beginners With Examples

Spread the love

Tailwind CSS Guide For Beginners With Examples

Developing an application is becoming faster and easier thanks to frameworks such as Tailwind guide. If you are yet to start simplifying your projects using it, there are high chances you don’t know about it well. Fortunately, this Tailwind guide with examples is about to change that. It discusses Tailwind CSS in detail, including what it is, why you should consider it, and how to get started. So, let’s delve into this Tailwind guide with examples to help you start using this time-saving technology.

About Tailwind CSS

As the name suggests, it is a utility-fist framework written using CSS. Its purpose is to ensure that its users create their applications easily and within the shortest time possible. It has utility classes enable you to control various elements, including shadows, typography, spacing, color, and layout. If you want to create a customized component, feel free to use it since you won’t have to leave your comfort zone if what you know well is HTML. Equally important, using this framework will not require you to type even a line of custom CSS.

Advantages of Using Tailwind CSS

The list can be long, but we will focus on the key benefits of using the Tailwind CSS framework. They include;

Writing little or no custom CSS: It has utility classes that help you realize custom designs but doesn’t require you to write any CSS in the process. So, if you need to style a certain element, it is quite simple since you need to apply a class that already exists in Tailwind CSS to the HTML code you are using and see the change.
No need to think about class names: As much as you will be using classes, you aren’t required to create or name them. After all, Tailwind CSS has already defined them, and all you have to do is use them. If you have used classes in other programming platforms, you have an idea of how hard it is to come up with ideal class names. Fortunately, that’s not a problem when using this framework. You also don’t need to memorize anything, including complicated components and styles.
Expect small CSS files: In most program developments, introducing a new component or feature translates to adding the corresponding CSS. Can you imagine what happens to the CSS file as you continue adding more components and features? Your guess is as good as mine, and by the time you are done, you will most likely have a huge CSS file, if not two or more. However, that isn’t a probability if you opt for Tailwind CSS. It allows you to reuse most styles thanks to elements such as padding and flexbox. Such utilities keep your CSS files as small as possible.
Making changes becomes less challenging: Have you ever made a simple change targeting a certain element, but its effect could be seen all over the application? That shouldn’t worry you when using Tailwind CSS. Since it uses local utility classes, changing one won’t affect the rest of the site. Under such circumstances, changing something whenever you deem fit is convenient.

To enjoy the above benefits, you must do a lot, including the following.

Step1: Add Tailwind CSS to your project using the package manager

First, there are several ways of adding Tailwind CSS to your project. As a matter of fact, it is faster to add it via CDN than through a package manager. However, there is a reason why our focus is the latter. It is the best method of adding the framework to your project. Thanks to PostCSS, you will be in a position to utilize all configuration possibilities via building tools.

Step 2: Ensure that NPM and Node.js are installed on your computer.

If a package.json fine isn’t available, run the command below on the terminal and ensure it is in your project’s root directory.

npm init

That command creates a package.json file that holds the project’s information and other library dependencies you may add later. Once that’s over, install Tailwind CSS using the command below. This code ensures that the version installed is the latest and stable and saves it as one of the dependencies.

npm install tailwindcss –save

Doing so avails Tailwind CSS in the project’s node_modules folder. Consequently, the npm install will automatically download the CSS framework as a dependency. The approach simplifies project dependencies management across various environments, including the production code and the local development files.

Step 3: Add Tailwind framework to your CSS

Installation is over, but you also need to add various elements of Tailwind in the main CSS file, including utility styles, components, and base. To do so, use @tailwind. It is as simple as creating and opening your main CSS files and adding these codes of line.

@tailwind base;

@tailwind components;

@tailwind utilities;

Upon processing the CSS file, Tailwind will add all its CSS styles to it, and it is possible to see this change once it happens.

Step 4: Create the configuration file

It is a smart step since having a configuration file helps you edit it as per your needs as the project continues. Adding and modifying default Tailwind utility classes become a breeze. Whether you are changing the spacing, sizing, colors, or fonts, among other elements, a configuration file simplifies it. You will use the Tailwind CLI to run this command to generate the file.

npx tailwindcss init

The above command generates a configuration file named tailwind.config.js. Its content is as follows;

// tailwind.config.js

module.exports = {

future: {},

purge: [],

theme: {

extend: {},

variants: {},

plugins: [],

}

The next step should be to add these two plugins

plugins: [

// …

require(‘tailwindcss’),

require(‘autoprefixer’),

// …

]

Step 5: Process CSS using Tailwind

It requires running the command above. Its purpose is to compile the main.css file before creating a new file, output.css. This new file is a CSS file; you will include your HTML files. The code is as follows;

npx tailwindcss build main.css -o output.css

It creates the output.css file, which contains every default Tailwind utility class as per the configuration file you created in step 4.

Step 6: Include Tailwind CSS Framework in the HTML template

Go to your root project directory and create an HTML file named index.html. Add the output.css file created in step 5 in the new HTML file’s head tag as follows;

<!DOCTYPE html>

<head>

<title>Tailwind CSS Guide with Examples</title>

</head>

<body>

<!—Tailwind guide with examples –>

</body>

</html>

Step 7: Use live-server

The project needs to be served; to do so, you must launch a web server. You can use live-server and install it using the following code;

$ npm install -g live-server

Due to its live-reloading features, running live-serve ensures that the web server checks your code, detects any changes, and reloads the browser to reflect the changes continuously. To start this web server, run this code;

$ live-server build

Last but not least, point your browser to 127.0.0.1.8080 and see the result

That said and done, it is important to note that Tailwind CSS is different from similar CSS frameworks such as Materialize CSS and Bootstrap. It lacks predefined components for notification bars, buttons, and cards, to mention a few. Let’s see how to go about it when dealing with these components.

Styling the Button component

One styles a button as follows;

<button class=”bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded”>My Tailwind Button</button>

The various utility classes applied include;

Rounded: the button has rounded corners
Px-2: the right and left padding of the button
Py-2: a top and bottom padding of 0.5 rem
Font-bold: as it says, the font will be bold
Text- white: the color of the text in the box will be white
Bg-blue-500: the background color of the button will be blue
Hover:bg-blue-700: the background color changes to this shade of blue if you hover over it

Styling the Notification bar Component

This code is an example of how to go about it with Tailwind CSS utility classes.

<span class=”font-semibold mr-2 text-left flex-auto”>Use Tailwind CSS to implement your own unique design!</span>

</div>

Some of the highlights from the above code for the outer div section of the notification bar include the following;

Bg-blue-900: dark blue background color
Py-4: top and bottom padding of 1 rem
Text-center: center aligning the text

There is a specification for the additional right and left padding on relatively large screens.

Then, there is the inner div element that’s inside the outer div element that applies the following Tailwind CSS utility classes;

Flex: it applies a flex layout to the container
Lg:inline-flex: inline flex layout to apply when viewing from a large screen
Lg:rounded-full: applies on a large screen where it assigns a 9999 px border-radius
Leading-none: sets the element’s line-height to 1
Text-blue-100: the text will be in light blue color
Items-center: the flex items will be centered relative to the cross-axis of the container
Bg-blue-800: the background color is blue
P–2: assigns a padding of 0.5 rem

Besides the two divs, the code displays a pair of span elements. The utility classes applied include;

Mr-3: the right margin is set to 0.75 rem
Text-xs: it sets the font size of your text to 0.75 rem
Py-1: the top and bottom padding is set to 0.25 rem
Px-2: the right and left padding of the container is set to o.5 rem
Font-bold: it will bold the font
Uppercase: ensures that the text is in uppercase
bg-blue-500: the background color is blue
rounded-full: the border radius of the element is set to 9999 px
flex: the container is assigned a flex layout

The other span element applies these utility classes

Font-semibold: it sets the text to be bold, but its font weight is 600 instead of the typical 700
Flex-auto: it facilitates the growing and shrinking of a flex item in reference to its original size
Text-left: it ensures that the text aligns with the left
Mr-2: assigns the right margin to 0.5 rem

Styling a Card Component

The following Tailwind CSS utility classes will style your card component

<div class=”font-bold text-xl mb-2″>Tailwind CSS For Beginners</div>

</p>

</div>

<span class=”inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2″>#tailwindcss</span>

<span class=”inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2″>#webdevelopment</span>

</div>

The card component has badges with hashtags, description text, headline text, and an image on top.

How to extract components in Tailwind CSS

You don’t have to repeat utility classes, especially as your project grows. Monitoring elements sharing the same styling and ensuring they are in sync can also be hard. Fortunately, extracting a component can solve these issues. You need to navigate to the css/styles.css file and use the @applydirective. Here’s an example;

@tailwind base;

@tailwind components;

.btn-blue {

@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;

}

.btn-blue:hover {

@apply bg-blue-700;

}

@tailwind utilities;

The CSS code should be between @tailwind components and @tailwind utilities. Upon changing that CSS file, repeat the build process by running the code below;

$ npm run build

Tailwind CSS has proven to speed up coding and development by ensuring you don’t write many lines of code. Besides writing, it also makes maintaining your code easy. Once you learn its utility classes, the learning curve becomes less steep. It also marks the beginning of creating and maintaining projects fast and easily.

Tailwind CSS Guide For Beginners With Examples

Tailwind CSS Guide For Beginners With Examples

admin

Leave a Reply Cancel reply

Best Courses

Best Nanodegree Reviews

Latest Courses

Trending Courses

Tailwind CSS Guide For Beginners With Examples

Tailwind CSS Guide For Beginners With Examples

Related posts:

admin

Leave a Reply Cancel reply