• What is Tailwind CSS?

    Tailwind CSS is a utility-first CSS framework that provides predefined low-level classes (like flex, p-4, text-center, bg-blue-500) to build custom designs directly in HTML without writing much custom CSS, allowing faster development and high customization.

  • How is Tailwind different from Bootstrap?

    • Tailwind CSS is a utility-first framework, while Bootstrap is a component-based framework.
    • Tailwind provides small utility classes for custom design; Bootstrap provides ready-made components like navbar, cards, and modals.
    • Tailwind allows full design flexibility; Bootstrap has predefined styling.
    • Tailwind requires more class usage in HTML; Bootstrap needs less styling effort.
    • Tailwind produces unique UI designs; Bootstrap sites often look similar.
    • Tailwind has smaller final CSS with purge optimization; Bootstrap may include unused styles.

    Tip: Use Bootstrap for quick ready UI, Tailwind for fully custom designs.

  • Why is Tailwind called a utility-first framework?

    Tailwind is called a utility-first framework because it provides small single-purpose utility classes (like margin, padding, flex, text-center, bg-blue-500) that are combined directly in HTML to build designs, instead of writing custom CSS or using prebuilt components.

  • Advantages of Tailwind CSS

    • Highly customizable design without writing much custom CSS.
    • Faster UI development using utility classes.
    • Smaller final CSS file with unused styles removed (purge).
    • Consistent spacing, colors, and typography system.
    • No need to switch between HTML and CSS frequently.
    • Easy to maintain and scale large projects.
    • Encourages reusable design patterns.

    Tip: Tailwind improves speed and flexibility while keeping styling consistent.

  • Disadvantages of Tailwind CSS

    • HTML becomes crowded with many utility classes.
    • Learning curve for beginners due to many class names.
    • Less suitable for developers who prefer traditional CSS.
    • Repeated utility classes can reduce readability.
    • Requires build setup for full optimization.
    • Not ideal for quick projects needing ready-made components.

    Tip: Tailwind is powerful for customization but can reduce HTML readability if not structured properly.

  • How Tailwind improves development speed?

    • Provides ready utility classes, reducing the need to write custom CSS.
    • Styling is done directly in HTML, avoiding context switching between files.
    • Predefined spacing, colors, and typography speed up design decisions.
    • Faster responsive design using built-in breakpoint utilities.
    • Reusable class patterns reduce repeated styling work.
    • Eliminates time spent naming CSS classes.

    Tip: Tailwind speeds development by letting developers build UI directly without writing separate CSS.

  • What is utility-first CSS?

    Utility-first CSS is an approach where small single-purpose classes (like spacing, color, flex, alignment) are used directly in HTML to style elements, instead of writing custom CSS or creating large component styles, allowing faster and more flexible UI development.

  • How Tailwind handles responsiveness?

    • Uses mobile-first responsive design approach.
    • Provides predefined breakpoint prefixes like sm:, md:, lg:, xl:.
    • Styles are applied conditionally based on screen size.
    • No need to write manual media queries.
    • Easy to change layout, spacing, and typography for different devices.

    Tip: Tailwind makes responsiveness simple by adding breakpoint prefixes directly to utility classes.

  • What are breakpoints in Tailwind?

    • Breakpoints are predefined screen sizes used to create responsive designs.
    • They apply styles based on device width.
    • Tailwind uses mobile-first breakpoints.
    • Common breakpoints: sm (small), md (medium), lg (large), xl (extra large), 2xl (very large screens).
    • Added as prefixes like md:text-lg, lg:flex.

    Tip: Breakpoints help adjust layout and styling automatically for different screen sizes.

  • Mobile-first approach in Tailwind

    • Tailwind follows a mobile-first design strategy.
    • Default styles apply to mobile devices first.
    • Larger screen styles are added using breakpoint prefixes.
    • Uses prefixes like sm:, md:, lg:, xl: for bigger screens.
    • Improves performance and responsiveness.
    • Encourages designing simple layouts before scaling up.

    Tip: Start styling for mobile, then enhance design step-by-step for larger screens.

  • How to center a div in Tailwind?

    • Use flex with justify-center and items-center to center horizontally and vertically.
    • Example: class="flex justify-center items-center h-screen".
    • For horizontal center only, use mx-auto.
    • For grid layout, use grid place-items-center.

    Tip: flex + justify-center + items-center is the most common way to perfectly center a div.

  • What is flex, grid in Tailwind?

    • flex enables Flexbox layout for one-dimensional alignment (row or column).
    • Used for aligning items horizontally or vertically using classes like justify-center, items-center, flex-col.
    • Best for simple layouts and component alignment.
    • grid enables CSS Grid layout for two-dimensional control (rows and columns).
    • Used with classes like grid-cols-3, gap-4, place-items-center.
    • Best for complex layouts and structured page designs.

    Tip: Use flex for alignment and small layouts, grid for full page or complex layouts.

  • Difference between flex and inline-flex

    • flex makes the element a block-level flex container and takes full available width.
    • inline-flex makes the element an inline-level flex container and takes only required content width.
    • Both use Flexbox for alignment and layout.
    • flex starts on a new line, while inline-flex stays inline with other elements.

    Tip: Use flex for layout sections and inline-flex for small inline components like buttons or badges.

  • How to handle spacing in Tailwind?

  • Margin vs padding utilities

  • What is container class?

  • How to customize Tailwind config?

  • What is tailwind.config.js?

  • How to add custom colors?

  • How to add custom fonts?