Responsive Footer
Tailwind CSS has rapidly become one of the most popular utility-first CSS frameworks, allowing developers to create beautiful and responsive user interfaces with ease. One of the key strengths of Tailwind CSS lies in its highly customizable nature, and this is achieved through its powerful configuration file — tailwind.config.js.
In this article, we will take a close look at the provided tailwind.config.js file and explore how it enhances the styles and layout of a sample web application. Additionally, we'll analyze the code for the main App.jsx and Footer.jsx components to understand how Tailwind CSS classes are utilized.
Understanding the tailwind.config.js File
Let’s start by analyzing the tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,jsx}"],
mode: "jit",
theme: {
extend: {
colors: {
primary: "#00040f",
secondary: "#00f6ff",
dimWhite: "rgba(255, 255, 255, 0.7)",
dimBlue: "rgba(9, 151, 124, 0.1)",
},
fontFamily: {
poppins: ["Poppins", "sans-serif"],
},
},
screens: {
xs: "480px",
ss: "620px",
sm: "768px",
md: "1060px",
lg: "1200px",
xl: "1700px",
},
},
plugins: [],
};
Content
The content key specifies the paths to the files that Tailwind CSS should scan to find classes used in your project. In this case, it includes index.html and all .js and .jsx files within the src directory. This helps Tailwind CSS optimize the generated CSS and eliminate unused styles, thanks to the Just-in-Time (JIT) mode enabled by the mode: "jit".
Theme
The theme section allows you to extend or customize Tailwind CSS's default styling. In the provided tailwind.config.js, the colors object is extended to include custom color definitions like primary, secondary, dimWhite, and dimBlue. These colors can then be used throughout the application with the corresponding class names, e.g., text-primary, bg-secondary, etc.
The fontFamily section introduces a new font family named poppins, making it accessible for use with the font-poppins class.
Screens
The screens section defines breakpoints for different screen sizes. The key-value pairs represent screen names (e.g., xs, sm, md, etc.) and their corresponding minimum widths. These breakpoints can be utilized with responsive utility classes like md:hidden, lg:flex, etc., to create a responsive layout that adapts to various screen sizes.
Exploring the App.jsx Component
Next, let’s take a look at the App.jsx component:
import { Footer, Navbar } from "./components";
const App = () => (
<div className="bg-primary w-full overflow-hidden">
<div className={`container mx-auto`}>
<div className={`xl:max-w-[1280px] w-full`}>
<Footer />
</div>
</div>
</div>
);
export default App;
In this component, we import the Footer and Navbar components from the ./components directory and render the Footer component within the main App component.
The classes bg-primary, w-full, and overflow-hidden are utilized to set the background color to the custom primary color defined in the tailwind.config.js file, make the element full-width, and hide any overflowing content, respectively.
Analyzing the Footer.jsx Component
Lastly, let’s examine the Footer.jsx component:
import { BsInstagram } from "react-icons/bs";
import { BiLogoFacebook } from "react-icons/bi";
import { AiOutlineTwitter, AiOutlineLinkedin } from "react-icons/ai";
const footerLinks = [
{
title: "Useful Links",
links: [
{
name: "Content",
link: "/",
},
{
name: "How it Works",
link: "/",
},
{
name: "Create",
link: "/",
},
{
name: "Explore",
link: "/",
},
{
name: "Terms & Services",
link: "/",
},
],
},
{
title: "Community",
links: [
{
name: "Help Center",
link: "/",
},
{
name: "Partners",
link: "/",
},
{
name: "Suggestions",
link: "/",
},
{
name: "Blog",
link: "/",
},
{
name: "Newsletters",
link: "/",
},
],
},
{
title: "Partner",
links: [
{
name: "Our Partner",
link: "/",
},
{
name: "Become a Partner",
link: "/",
},
],
},
];
const socialMedia = [
{
id: "social-media-1",
icon: <BsInstagram />,
link: "https://www.instagram.com/",
},
{
id: "social-media-2",
icon: <BiLogoFacebook />,
link: "https://www.facebook.com/",
},
{
id: "social-media-3",
icon: <AiOutlineTwitter />,
link: "https://www.twitter.com/",
},
{
id: "social-media-4",
icon: <AiOutlineLinkedin />,
link: "https://www.linkedin.com/",
},
];
const Footer = () => (
<section
className={`flex justify-center items-center sm:py-16 py-6 flex-col`}
>
<div
className={`flex justify-center items-start md:flex-row flex-col mb-8 w-full`}
>
<div className="flex-[1] flex flex-col justify-start mr-10">
{/* <img
src={path_to_image}
className="w-[266px] h-[72.14px] object-contain"
/> */}
<h1 className="w-[266px] h-[72.14px] text-7xl text-white">Logo</h1>
<p
className={`font-poppins font-normal text-dimWhite text-[18px] leading-[30.8px] mt-4 max-w-[312px]`}
>
A new way to make the payments easy, reliable and secure.
</p>
</div>
<div className="flex-[1.5] w-full flex flex-row justify-between flex-wrap md:mt-0 mt-10">
{footerLinks.map((footerlink) => (
<div
key={footerlink.title}
className={`flex flex-col ss:my-0 my-4 min-w-[150px]`}
>
<h4 className="font-poppins font-medium text-[18px] leading-[27px] text-white">
{footerlink.title}
</h4>
<ul className="list-none mt-4">
{footerlink.links.map((link, index) => (
<li
key={link.name}
className={`font-poppins font-normal text-[16px] leading-[24px] text-dimWhite hover:text-secondary cursor-pointer ${
index !== footerlink.links.length - 1 ? "mb-4" : "mb-0"
}`}
>
{link.name}
</li>
))}
</ul>
</div>
))}
</div>
</div>
<div className="w-full flex justify-between items-center md:flex-row flex-col pt-6 border-t-[1px] border-t-[#3F3E45]">
<p className="font-poppins font-normal text-center text-[18px] leading-[27px] text-white">
Copyright Ⓒ 2022 HooBank. All Rights Reserved.
</p>
<div className="flex flex-row md:mt-0 mt-6">
{socialMedia.map((social, index) => (
// <img
// key={social.id}
// src={social.icon}
// alt={social.id}
// className={`w-[21px] h-[21px] object-contain cursor-pointer ${
// index !== socialMedia.length - 1 ? "mr-6" : "mr-0"
// }`}
// onClick={() => window.open(social.link)}
// />
<div key={index}
className={`w-[21px] h-[21px] text-white text-2xl cursor-pointer ${
index !== socialMedia.length - 1 ? "mr-6" : "mr-0"
}`}
>
{social.icon}
</div>
))}
</div>
</div>
</section>
);
export default Footer;
The Footer component contains various elements that form the footer of the web application. It uses Tailwind CSS utility classes like flex, justify-center, items-center, sm:py-16, py-6, flex-col, etc., to achieve the desired layout and spacing. These classes leverage the responsive breakpoints defined in the screens section of the tailwind.config.js file to adjust the layout for different screen sizes.
Conclusion
The provided tailwind.config.js file demonstrates the flexibility of Tailwind CSS, allowing you to customize colors, add new font families, and define responsive breakpoints. By understanding the power of the configuration file and how it enhances the styling capabilities of Tailwind CSS, you can create visually stunning and responsive user interfaces for your web applications.
Remember, Tailwind CSS encourages the use of utility classes, which might lead to slightly larger HTML files. However, this tradeoff enables rapid development and easy maintenance, making Tailwind CSS an excellent choice for projects of all sizes. So go ahead, experiment with your tailwind.config.js file, and unleash the true potential of Tailwind CSS!