Skip to main content
Advertisement

Modern CSS and Tailwind CSS

Alongside the evolution of web design, utility-first frameworks have become widely adopted for building fast and consistent interfaces.

1. CSS Variables (Custom Properties)​

Allows for global management of style values.

:root {
    --primary-color: #3b82f6;
    --border-radius: 8px;
}

.button {
    background-color: var(--primary-color);
    border-radius: var(--border-radius);
}

2. What is Tailwind CSS?​

A Utility-First CSS framework. Instead of writing separate CSS files, you style elements by adding pre-defined utility classes directly to your HTML tags.

Key Advantages​

  • Speed: Drastically reduces the time spent on manual CSS authoring.
  • Consistency: Maintaining UI consistency is easy by using a pre-defined design system (spacing, colors, shadows, etc.).
  • Optimization: The build process removes any unused classes, keeping the final production file lightweight.

Usage Example (React/HTML)​

<div class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-all">
    Click Me
</div>

3. Animations and Effects​

  • Transition: Smooth changes over a specified duration.
  • Transform: Rotation, scaling, skewing, and shifting elements.
  • Keyframes: Defining precise, multi-step animations.
@keyframes slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.box {
    animation: slide-in 0.5s ease-out;
}

4. Glassmorphism​

A popular modern design style that features a semi-transparent, blurred background effect (also used in this project).

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

You have now completed the Web Fundamentals section! Proceed to the next step to learn other programming languages or frameworks.

Advertisement
Advertisement