Level Up Your Web Styling

Crafting visually appealing user interfaces has become a prominent concern in modern web development. CSS, the cornerstone of styling in web design, continues to evolve, offering developers powerful tools and methodologies. Among these, Tailwind CSS has emerged as a popular framework, streamlining the process of responsive designs. However, beyond just frameworks, understanding and implementing CSS best practices are essential for optimizing code efficiency, maintainability, and user experience. In this article, we delve into the world of Tailwind CSS and explore a range of best practices that can elevate your CSS game to new heights.

TailwindCSS Installation

Tailwind CSS offers a utility-first approach to streamlining your workflow and organizing your styles. It also breaks the mold of traditional CSS frameworks by providing a collection of low-level utility classes you can directly apply to your HTML. This unique approach simplifies UI development while setting consistent standards for CSS maintenance.

To begin with, let's walk through the steps to install Tailwind CSS. To complete the installation process, refer to the codesnippet provided below.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update content in tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
   content: [
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
   
      // Or if using `src` directory:
      "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
      extend: {},
   },
   plugins: [],
}

Add this content in global.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

Start using Tailwind’s utility classes to style your content.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center">
   <div class="shrink-0">
     <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
   </div>
   <div>
     <div class="text-xl font-medium text-black">ChitChat</div>
     <p class="text-slate-500">You have a new message!</p>
   </div>
 </div>

Optimization of TailwindCSS for production

Once you've successfully installed Tailwind CSS, it's time to optimize it for production. Below is a code snippet illustrating how to do this if you've installed Tailwind CSS using the PostCSS plugin.

// Install cssnano and minify
yarn add cssnano
yarn add minify

npx tailwindcss -o build.css --minify


// Add this in postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

Media Queries Size for Responsiveness

After optimizing Tailwind CSS for production, the next step is crafting responsive designs that adapt easily to various devices and screen sizes. Tailwind CSS simplifies this process by offering utility classes for responsive breakpoints. Below is a guide to popular media query sizes and how to customize them to suit your project's needs.

This list is a starting point for your responsive design, showcasing popular media query sizes for reference. To tailor the user experience to your project, explore adjusting these breakpoints for optimal results.

xs: '280px',
sm: '320px',
md: '368px',
lg: '390px',
xl: '412px',
'2xl': '540px',
'3xl': '640px',
'4xl': '768px',
'5xl': '1024px',
'6xl': '1280px',
'7xl': '1366px',
'8xl': '1440px',
'9xl': '1536px',
'10xl': '1680px',
'11xl': '1920px',

Custom Container Classname

Let’s explore extending Tailwind CSS with third-party plugins to enhance your project with new styles. One such custom plugin introduces a container class designed to centrally display content within the website viewport, ensuring responsive alignment across different screen sizes. Refer to the code snippet below for an example.

plugins: [
   function ({ addComponents }: any) {
     addComponents({
       '.containers': {
         maxWidth: '1240px',
         width: '91.666667%',
         marginLeft: 'auto',
         marginRight: 'auto',
       },
     });
   },
],

Install SASS (CSS Preprocessor)

SASS is a powerful tool in web development that empowers you to write cleaner, more maintainable CSS code. It adds features like variables for consistent styling and nested rules for better organization. These special SASS features are compiled into standard CSS, making it compatible with all modern browsers.

Using SASS, you can create reusable styles with variables, ensuring consistency across your project. Nesting rules help structure your stylesheets more efficiently, improving readability and maintenance. The .scss extension is commonly used for SASS files, providing a familiar environment for developers accustomed to CSS syntax. Check the code below to see how SASS is used in an example.

// Variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

// Nesting Rules
nav {
   ul {
      margin: 0;
      padding: 0;
      list-style: none;
   }

   li { display: inline-block; }

   a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
   }
}

Following the BEM CSS Naming Convention

In addition to leveraging SASS features, it's essential to follow best practices for organizing your CSS code. One such practice is the BEM (Block Element Modifier) naming convention, which helps you write clean, clear, and easy-to-manage CSS. BEM organizes your styles by blocks, elements, and modifiers, making your codebase more logical and easier to navigate, especially for larger projects.

See the provided example for BEM to understand its implementation better.

Block

// SCSS
.header {
   display: flex;
}

// HTML
<div class="header"></div> 

Element

// SCSS
.header {
   display: flex;

      &__image {
      display: block;
      }
}

// HTML
<div class="header">
   <img class="header__logo" src="logo.png" alt="Logo">
</div> 

Modifiers

// SCSS
.header {
   display: flex;

      &__image {
      display: block;
      }

      &__list {
      display: flex;
      flex-direction: row;
      gap: 8px;
      }

      &__item {
      display: flex;
      }

      &__link {
      display: flex;
      color: black;

      // Modifier
      &--active {
         color: red;
      }
      }
}

// HTML
<div class="header">
   <img class="header__logo" src="logo.png" alt="Logo">
   <ul class="header__list">
      <li class="header__item"><a class="header__link">Link</a></li>
      <li class="header__item">
      <a class="header__link header__link--active">Active</a>
      </li>
   </ul>
</div> 

As a wrap-up, in this article, we delved into several key aspects of modern web development:

1. Tailwind CSS
2. Media Queries
3. Custom Container Classname
4. SASS
5. BEM CSS Naming Convention

By integrating these techniques and best practices, developers can streamline their workflows, improve code readability, and deliver enhanced user experiences across various devices and screen sizes. Until we meet again in the next article, we encourage you to apply these techniques in your projects and witness the transformation they bring to your web development journey.

Happy coding!

Previous Article - Best Practices & Beyond in Next.js