TailwindCSS: An Efficient Alternative for Responsive Designs

TailwindCSS: An Efficient Alternative for Building Responsive Websites

Intro...

As a newcomer to web development, following the standard path of learning HTML, CSS, and JavaScript before moving on to a framework of your choice is ideal. However, for many beginners, CSS can be overwhelming due to its bulky nature, making it difficult to move on to JavaScript. This was certainly my experience, and after finally getting to grips with some key CSS properties, I had to learn how to make my app responsive. This seemed impossible, and I almost gave up. In fact, it took me eight days to design a landing page for a desktop view and make it responsive, my first-ever attempt at making a project responsive. Although it was fulfilling, it was also exhausting due to the various breakpoints I had to navigate.

Why I Chose TailwindCSS...

This struggle with media queries in CSS continued when I moved on to React and began using reusable components, making the whole process overwhelming. Despite senior colleagues suggesting Tailwind as an alternative, I was reluctant to learn yet another difficult styling method but I desperately needed to create responsive apps using React. After a while, I eventually decided to watch a short Youtube clip on Tailwind surprisingly the syntax looked easy, and I couldn't believe it had taken me so long to try it.

When I was done with the clip I reached out to a Twitter user for more information, and she scheduled a Google Meet meeting with me. She explained the basics, introduced me to the official Tailwind documentation, and I was finally ready to work with Tailwind. Shortly afterward, I coded and styled two pages for a React project for my mentor using Tailwind, and I was amazed at how easy the responsiveness was. Although I wasn't used to mobile-first designs, I could refer to the documentation when needed and get the project to work. This was my first time making a design responsive using React, and I knew there was no going back. I then joined a team for a hackathon as the front-end developer, where we were to build a multipage app. This was my chance to utilize Tailwind to its fullest potential, and I was able to build the app in six days, with everything fully responsive. I could easily implement designs that I was unable to do previously with normal CSS, and it was unreal. This was when I decided to fully adopt Tailwind as my preferred styling framework.

Some Important Concepts I Learnt using Tailwind

As someone who already had prior knowledge of CSS, I was able to pick up Tailwind fast. I will be talking about adding background images using tailwind and also how to use linear gradient that has three colors in tailwind.

Setting Background Image with Tailwind

When building my project I had to use background images in my app and the docs weren't helping so I made some research I'll be sharing below;

Firstly you need to put the image you want to set as a background image in your public folder in your preferred IDE and afterward set your background image in tailwind using the code syntax below:

<div className="bg-[url(/folderNameInPublicFolder/backgroundImageToBeSet.png)] bg-no-repeat h-[40%] md:w-[300px] md:h-auto md:bg-cover"></div>

Note: The reason why you don't need to include the "public" folder name is that when your React application is built, the contents of the "public" folder are copied to the build directory (typically "build" or "dist") and served from there. The server serving your application knows to look for these files in the root directory, which is why you only need to provide the relative path from the root.

Setting a linear gradient that has three colors combined in tailwind

When using linear gradient in tailwind you first have to know the color model you are working with. If you are working with Hex colors you can simply add the colors in a square bracket so tailwind can recognize it and then write it in the syntax below ;

<button className="bg-gradient-to-r from-[#95CAD6] via-[#9F9ADB] to-[#B993E9]"></div>

when using RGB as your color model, you have to set the name of the colors being used in your tailwind.config.cjs file in your React project inside the extend object with the syntax below;

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,jsx,}"],
  theme: {
    extend: {
      colors: {
        "light-purple": "rgba(149, 202, 214, 1)",
        "dark-purple": "rgba(159, 154, 219, 1)",
        "deep-purple": "rgba(185, 147, 233, 1)",
      },
    },
  },
  plugins: [],
};

Afterward, you set the linear gradient in your code using the same method as that of the hex but this time replacing the color code in the hex with the names of the colors you've defined in your tailwind.config.cjs and also the square bracket isn't needed anymore because the colors have been defined in tailwind.config.cjs and therefore tailwind now recognizes them as actual colors. See syntax for RGB colors using linear gradient below;

<button className="bg-gradient-to-r from-light-purple via-dark-purple to-deep-purple"></button>

Note: If you only need to add a linear gradient that has just two colors all you need to do is omit the 'via' keyword and just include only the 'from' and 'to' keywords.

These are just some of the concepts I've learned using Tailwind, and I'm excited to continue exploring and implementing more features. I hope you enjoyed my article please drop a like and stay tuned for more.

Portfolio

Ellah Codes