Tailwind CSS - Crash Course

-

 

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It provides low-level utility classes that can be combined to create any design directly in your markup.

Recommendation:

Background Classes & Shades

Tailwind provides classes for setting background colors using a palette of over 90 shades.

<div class="bg-blue-500 text-white">Blue Background</div> <div class="bg-red-500 text-white">Red Background</div>

Use Case: Apply background colors to various components such as buttons, cards, or entire sections.

Tailwind's Numbering System

Tailwind uses a rem-based spacing scale. Assuming the base font size is 16px, here are some common conversions:

Pixels

rem

Tailwind

0px

0rem

0

4px

0.25rem

1

8px

0.5rem

2

12px

0.75rem

3

16px

1rem

4

20px

1.25rem

5

Use Case: Control padding, margin, width, height, and other spacing properties.

Sizing with w-* and h-* Classes

Use w-* and h-* classes for width and height.

<div class="w-16 h-16 bg-green-500"></div> <!-- 64px by 64px --> <div class="w-1/2 h-screen bg-blue-500"></div> <!-- 50% width and full screen height -->

Use Case: Define dimensions for various elements such as containers, images, and sections.

Padding and Margins

Set padding and margins using p-* and m-*.

<div class="p-4 bg-gray-200">Padding 1rem</div> <div class="m-4 bg-gray-400">Margin 1rem</div>

Use Case: Add spacing inside and outside elements to create a visually appealing layout.

Styling Text

Tailwind provides utility classes for text styling.

Fonts

  • .font-sans: Applies a sans-serif font.

  • .font-serif: Applies a serif font.

  • .font-mono: Applies a monospace font.

<div class="font-sans">Sans-serif font</div> <div class="font-serif">Serif font</div> <div class="font-mono">Monospace font</div>

Use Case: Apply different font styles to text elements.

Sizing

  • .text-xs: 0.75rem / 12px

  • .text-sm: 0.875rem / 14px

  • .text-base: 1rem / 16px

  • .text-lg: 1.125rem / 18px

  • .text-xl: 1.25rem / 20px

  • .text-2xl: 1.5rem / 24px

  • .text-3xl: 1.875rem / 30px

  • .text-4xl: 2.25rem / 36px

  • .text-5xl: 3rem / 48px

  • .text-6xl: 4rem / 60px

<div class="text-lg">Large Text</div> <div class="text-2xl">Extra Large Text</div>

Use Case: Control the size of text elements.

Text Align

  • .text-left: Aligns text to the left.

  • .text-center: Aligns text to the center.

  • .text-right: Aligns text to the right.

  • .text-justify: Justifies text.

<div class="text-center">Centered Text</div>

Use Case: Control the alignment of text.

Text Color

  • .text-{color}-{shade (100-900)}: Sets the text color.

<div class="text-red-500">Red Text</div>

Use Case: Change the color of text elements.

Styling

  • .italic: Makes text italic.

  • .not-italic: Makes text normal.

<div class="italic">Italic Text</div>

Use Case: Apply or remove italic styling.

Font Weight (Bold)

  • .font-hairline: 100

  • .font-thin: 200

  • .font-light: 300

  • .font-normal: 400

  • .font-medium: 500

  • .font-semibold: 600

  • .font-bold: 700

  • .font-extrabold: 800

  • .font-black: 900

<div class="font-bold">Bold Text</div>

Use Case: Control the weight of text elements.

Letter Spacing

  • .tracking-tighter: -0.05em

  • .tracking-tight: -0.025em

  • .tracking-normal: 0

  • .tracking-wide: 0.025em

  • .tracking-wider: 0.05em

  • .tracking-widest: 0.1em

<div class="tracking-wide">Wide Letter Spacing</div>

Use Case: Adjust the spacing between letters.

Line Height/Spacing

  • .leading-3: 12px

  • .leading-4: 16px

  • .leading-5: 20px

<div class="leading-5">Increased Line Height</div>

Use Case: Control the line height of text elements.

Text Decorations

  • .underline: Adds an underline.

  • .line-through: Adds a line-through.

  • .no-underline: Removes text decorations.

<div class="underline">Underlined Text</div>

Use Case: Apply or remove text decorations.

Text Transform

  • .uppercase: Transforms text to uppercase.

  • .lowercase: Transforms text to lowercase.

  • .capitalize: Capitalizes text.

  • .normal-case: Resets text to normal case.

<div class="uppercase">Uppercase Text</div>

Use Case: Change the case of text elements.

Borders

Control border properties with utility classes.

Border Width

  • .border: 1px border.

  • .border-0: No border.

  • .border-2: 2px border.

  • .border-4: 4px border.

  • .border-8: 8px border.

<div class="border-2 border-dashed border-red-500 rounded-lg p-4"> Dashed Red Border with Rounded Corners </div>

Use Case: Add borders with different widths and styles.

Border Color

  • .border-{color}-{shade (100-900)}: Sets the border color.

<div class="border-blue-500">Blue Border</div>

Use Case: Change the color of borders.

Border Style

  • .border-solid: Solid border.

  • .border-dashed: Dashed border.

  • .border-dotted: Dotted border.

  • .border-double: Double border.

  • .border-none: No border.

<div class="border-dotted border -gray-500">Dotted Border</div>

Use Case: Change the style of borders.

Border Radius

  • .rounded-none: No border radius.

  • .rounded-sm: 0.125rem / 2px border radius.

  • .rounded: 0.25rem / 4px border radius.

  • .rounded-lg: 0.5rem / 8px border radius.

  • .rounded-xl: 0.75rem / 12px border radius.

  • .rounded-full: Fully rounded corners.

<div class="rounded-full bg-red-500 w-16 h-16"></div>

Use Case: Add rounded corners to elements.

Display

Control the display mode of elements.

Modes

  • .block

    • Description: Displays an element as a block element.

    • Example:

      <div class="block">Block Element</div>

    • Use Case: Use this to make an element take up the full width available, stacking vertically.

  • .inline-block

    • Description: Displays an element as an inline-level block container.

    • Example:

      <div class="inline-block">Inline Block Element</div>

    • Use Case: Use this to allow an element to sit inline with text but still allow for width and height settings.

  • .inline

    • Description: Displays an element as an inline element.

    • Example:

      <span class="inline">Inline Element</span>

    • Use Case: Use this for elements that should flow within text content.

  • .flex

    • Description: Displays an element as a block-level flex container.

    • Example:

      <div class="flex"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Use this to create flexible layouts that distribute space among items in a container.

  • .inline-flex

    • Description: Displays an element as an inline-level flex container.

    • Example:

      <div class="inline-flex"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Use this to combine flexbox layout capabilities with inline display behavior.

  • .table

    • Description: Displays an element as a block-level table.

    • Example:

      <div class="table"> <div class="table-row"> <div class="table-cell">Cell 1</div> <div class="table-cell">Cell 2</div> </div> </div>

    • Use Case: Use this to structure content in a table format.

  • .table-row

    • Description: Displays an element as a table row.

    • Example:

      <div class="table-row">Table Row</div>

    • Use Case: Use this within a .table container to define rows.

  • .table-cell

    • Description: Displays an element as a table cell.

    • Example:

      <div class="table-cell">Table Cell</div>

    • Use Case: Use this within a .table-row to define cells.

  • .hidden

    • Description: Hides an element.

    • Example:

      <div class="hidden">Hidden Element</div>

    • Use Case: Use this to completely hide an element from the layout.

Flexbox

Use Flexbox utilities to control the layout.

Default Direction - Horizontal Alignment

  • .justify-start

    • Description: Aligns items to the start of the container.

    • Example:

      <div class="flex justify-start"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Align items to the left.

  • .justify-center

    • Description: Centers items horizontally.

    • Example:

      <div class="flex justify-center"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Center items horizontally within the container.

  • .justify-end

    • Description: Aligns items to the end of the container.

    • Example:

      <div class="flex justify-end"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Align items to the right.

  • .justify-between

    • Description: Distributes items evenly with space between them.

    • Example:

      <div class="flex justify-between"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Place items at the edges with equal space between them.

  • .justify-around

    • Description: Distributes items evenly with space around them.

    • Example:

      <div class="flex justify-around"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Place items with equal space around them.

Default Direction - Vertical Alignment

  • .items-stretch

    • Description: Stretches items to fill the container's height.

    • Example:

      <div class="flex items-stretch"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Stretch items to fill the container's height.

  • .items-start

    • Description: Aligns items to the start of the container.

    • Example:

      <div class="flex items-start"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Align items to the top.

  • .items-center

    • Description: Centers items vertically.

    • Example:

      <div class="flex items-center"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Center items vertically within the container.

  • .items-end

    • Description: Aligns items to the end of the container.

    • Example:

      <div class="flex items-end"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Align items to the bottom.

  • .items-baseline

    • Description: Aligns items along their baselines.

    • Example:

      <div class="flex items-baseline"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Align items based on their text baselines.

Flex Direction

  • .flex-row

    • Description: Lays out items horizontally.

    • Example:

      <div class="flex flex-row"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Default direction for flex items.

  • .flex-row-reverse

    • Description: Lays out items horizontally in reverse order.

    • Example:

      <div class="flex flex-row-reverse"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Reverse the order of flex items.

  • .flex-col

    • Description: Lays out items vertically.

    • Example:

      <div class="flex flex-col"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Change the flex direction to vertical.

  • .flex-col-reverse

    • Description: Lays out items vertically in reverse order.

    • Example:

      <div class="flex flex-col-reverse"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Reverse the order of flex items vertically.

Wrapping

  • .flex-no-wrap

    • Description: Prevents items from wrapping.

    • Example:

      <div class="flex flex-no-wrap"> <div>Item 1</div> <div>Item 2</div> </div>

    • Use Case: Keep all flex items on a single line.

  • .flex-wrap

    • Description: Allows items to wrap onto multiple lines.

    • Example:

      <div class="flex flex-wrap"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>

    • Use Case: Allow flex items to wrap as needed.

  • **`.flex-wrap-re

verse`**
- Description: Wraps items in reverse order.
- Example:
html <div class="flex flex-wrap-reverse"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
- Use Case: Wrap flex items in reverse order.

Responsive Design

Tailwind offers a mobile-first approach to responsive design.

<div class="text-center sm:text-left lg:text-right"> Responsive Text Alignment </div>

Use Case: Adjust styles based on the viewport size to ensure a consistent user experience across devices.

Hover and Focus Modifiers

Tailwind allows state-based styling.

<button class="bg-blue-500 hover:bg-blue-700 focus:bg-blue-900 text-white font-bold py-2 px-4 rounded"> Hover and Focus Example </button>

Use Case: Improve user interaction by changing styles on hover or focus.

Additional Resources


Comments

Post a Comment

Popular posts from this blog

Advanced .NET Core Web API Interview Questions

-
.NET Core Web API Interview Questions General Questions 1.      What is .NET Core and how does it differ from .NET Framework? Answer: .NET Core is a cross-platform, open-source framework for building modern applications, while .NET Framework is Windows-only and has been around longer. .NET Core is more modular and can run on Windows, Linux, and macOS. Use Case: Choose .NET Core when you need to build cross-platform applications or microservices that can run on various operating systems. 2.      Explain the middleware pipeline in http://ASP.NET Core. Answer: Middleware in http://ASP.NET Core is software that's assembled into an application pipeline to handle requests and responses. Each component chooses whether to pass the request to the next component or handle it directly. Example: app.Use(async (context, next) => {     // Perform some action before the next middleware     await next.Invoke();   ...
Read more

JSON Web Token (JWT) Explained

-
JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is used as the payload of a JSON Web Signature (JWS) structure or as the plaintext of a JSON Web Encryption (JWE) structure, enabling the claims to be digitally signed or integrity protected with a Message Authentication Code (MAC) and/or encrypted. How JWT Works: Step-by-Step 1. User Authentication User Login : The user sends a login request to the server with their credentials (e.g., username and password). POST /api/login Content-Type: application/json { "username": "user", "password": "password" } Server Verification : The server verifies the user's credentials. If they are valid, the server generates a JWT. 2. Token Generation JWT Creation : The server creates a JWT. A JWT typically consists of three parts: Header, Payload, and Signature. Header : { "alg" : ...
Read more