Guided: Style a Custom Page Using Tailwind CSS Utility Classes

Tailwind uses the p{sides}-{padding} format to apply padding to elements.

• The p- prefix applies uniform padding to all four sides (top, right, bottom, and left).

• The number following p- (such as 5 in p-5) corresponds to Tailwind’s spacing scale, where each unit equals 0.25rem (4px). Thus, p-5 means 5 × 0.25rem = 1.25rem, equivalent to 20px (assuming the default browser setting of 1rem = 16px).

• The class p-5 adds uniform 20px padding around the main tag, providing consistent spacing between the content and the page edges.

• Tailwind’s padding scale ranges from p-1 (0.25rem = 4px), p-2 (0.5rem = 8px), up to p-96 (24rem = 384px), offering users extensive flexibility.

• Vertical padding uses the py- prefix to apply equal padding to the top and bottom of an element. For example, py-5 translates to 5 × 0.25rem = 1.25rem, which adds 20px of padding to both the top and bottom of the section tag.

• Horizontal padding uses the px- prefix to apply equal padding to the left and right sides of an element. For instance, px-6 translates to 6 × 0.25rem = 1.5rem, which adds 24px of padding to both the left and right sides of the section tag.

• Tailwind lets you set padding on each side individually using these prefixes:

  • pt- adds padding to the top (space above the content). For example, pt-1.5 (1.5 × 0.25rem = 0.375rem) adds 6px of padding on top.
  • pl- adds padding to the left (space to the left). For example, pl-6 (6 × 0.25rem = 1.5rem) adds 24px of padding on the left. This creates space between the image and the text.
  • pr- adds padding to the right (space to the right). For example, pr-5 (5 × 0.25rem = 1.25rem) adds 20px of padding on the right.
  • pb- adds padding to the bottom (space below the content). For example, pb-4 (4 × 0.25rem = 1rem) adds 16px of padding on the bottom. This adds space below the content.

• These classes give you full control over spacing on each side, allowing you to fine-tune the layout exactly as needed.

• Tailwind typically uses a predefined spacing scale (e.g., pl-2 = 8px, pl-1.5 = 10px, pl-3 = 12px). However, you can define custom values using square brackets, as demonstrated with pl-[9px] (which applies exactly 9px of left padding). The brackets allow you to override the scale with an exact measurement.

• py-1 adds 4px of vertical padding (top and bottom).

• px-2 adds 8px of horizontal padding (left and right).

• In Tailwind CSS, width utilities use the w- prefix to set an element's width. Here, w-[119px] applies a custom width of exactly 119px using square brackets, overriding Tailwind’s default spacing scale.

• Height utilities use the h- prefix. Setting h-auto adjusts the height automatically, preserving the image’s original aspect ratio.

• Tailwind provides several predefined width and height options:

  • Fixed sizes:
    • w-1 = 0.25rem (4px), w-2 = 0.5rem (8px), up to w-96 = 24rem (384px).
  • Fractional sizes (percentages of the parent container):
    • w-1/2 = 50%, w-1/6 = 16.67%, etc.
  • Special sizes:
    • w-full = 100% of the parent’s width
    • w-screen = 100% of the viewport width
    • w-min = width of the content's minimum required space
    • w-max = width of the content's maximum available space

• The same concept applies to height (h-) utilities: h-1, h-1/2, h-full, h-screen, and more.

The display property controls how an element is shown. Some common options include:

• block: Takes up the full available width and stacks vertically (like a paragraph)

• inline: Stays in line with other elements (like words in a sentence)

• flex: Converts an element into a flexible container, allowing it to arrange its children easily

• inline-block: Aligns horizontally, but maintains box-model properties

Flexbox is a CSS layout system that simplifies the arrangement of elements. Tailwind provides straightforward utility classes for flexbox:

• flex: Sets display: flex, turning the element into a flex container

• flex-row: Sets flex-direction: row, aligning child elements (e.g., img, div, and p) horizontally

• flex-column: Stacks child elements vertically (like boxes in a column; not used here)

• flex-grow: Applied to the p tag, sets flex-grow: 1, allowing the element to expand and fill available space

• flex-shrink: Controls how elements shrink when space is limited (default is flex-shrink: 1; not adjusted here)

• block: The block display property makes an element behave like a block-level element. It takes up the entire width of its container by default and always starts on a new line, pushing subsequent elements onto the next line. In this solution, the p and h2 tags use the block class to appear on separate lines, one below the other.

• inline-block: This property keeps an element inline (side by side) with others while still allowing block-like properties (such as width, height, padding, and margins). Here, the button and span tags use inline-block to align horizontally next to each other while maintaining their spacing and styling.

The grid class applies display: grid, turning the parent div into a grid container. This allows you to neatly organize its child elements into a structured grid layout. The grid-cols-2 class splits the grid into two equal-width columns, so the content inside the add-remove div is evenly distributed side by side.

• grid-cols: This sets the number of columns in the grid layout. Tailwind offers options ranging from 1 to 12 columns. For example, grid-cols-2 creates two equal columns, grid-cols-3 creates three, and so forth up to grid-cols-12.

• grid-rows: This utility controls the number of rows in the grid (e.g., grid-rows-1, grid-rows-2, etc.). However, it isn't used here.

The max-w- prefix sets the maximum width an element can have, preventing it from stretching beyond the desired size. The class max-w-lg sets a maximum width of 32rem (512px).

• Other options include:

  • max-w-sm = 24rem
  • max-w-md = 28rem
  • max-w-full = 100% of the parent element
  • max-w-screen-lg = 1024px
  • max-w-min = min-content

• Using max-width helps maintain readability on large screens while ensuring flexibility on smaller devices.

Margins add space outside an element, unlike padding, which adds space inside. Both margins and padding use Tailwind’s spacing scale (1 unit = 0.25rem or 4px):

• mt-5 sets a top margin of 20px, adding space above the section.
• mb-5 sets a bottom margin of 20px, adding space below the section.
• mx-auto sets left and right margins to auto, horizontally centering the element within its parent.

Margins and padding share similar naming conventions in Tailwind CSS:

• m- (all sides), mx- (horizontal), my- (vertical), and individual sides: mt-, mr-, mb-, ml-.

• mb-4 (4 × 0.25rem = 1rem) adds a 16px bottom margin to the first p tag, creating space beneath the item number.

• -mt-1 (-1 × 0.25rem = -0.25rem) applies a negative top margin of -4px to the h2 tag, pulling it upward. Negative margins help reduce spacing, creating a tighter layout above the title.

• mb-[21px] applies a custom bottom margin of 21px to the p tag. Tailwind’s square bracket syntax [21px] allows you to use precise spacing values outside the default spacing scale.

• mr-2 applies an 8px right margin to the minus button, creating space between it and the span.

• ml-2 adds an 8px left margin to the plus button.

• mx-2 adds an 8px margin on both the left and right sides of the span, ensuring consistent spacing around the quantity number.

• ml-4 adds a 16px left margin to the Remove button, clearly separating it from the quantity controls.

• Tailwind uses the bg- prefix to apply background colors, followed by a color name and its shade, such as bg-gray-50. The shade scale ranges from 50 (very light) to 950 (very dark). Some popular Tailwind colors include gray, blue, red, green, emerald, teal, indigo, and purple.

• bg-gray-50 applies a very light gray shade (50) to the main element, providing a soft, neutral backdrop for your page.

• bg-white sets a pure white background for the section, making it stand out clearly against the gray background. Pure colors like white (bg-white) and black (bg-black) do not have shade numbers because they represent absolute colors.

• bg-emerald-400 applies a medium emerald-green shade (400) to the div tag with the ID of btn-plus-minus, providing an attractive and subtle highlight to the quantity controls area.

By default, the border class in Tailwind applies a 1px border. You can increase the thickness using classes like border-2 (2px), border-4 (4px), and border-8 (8px). You can also apply borders to specific sides using border-l (left), border-t (top), border-r (right), and border-b (bottom).

• Adding border-2 to the section tag applies a 2px border around it.
• Adding border-4 to the div with the ID btn-plus-minus creates a thicker 4px border for emphasis.

Border color classes use the border- prefix followed by a color name and shade, such as border-emerald-500.

• Applying border-emerald-700 (a dark emerald) to the section gives it a bold, defined outline.
• Applying border-emerald-500 (a medium emerald) to the div with the ID btn-plus-minus adds a softer, contrasting frame.

The rounded- class is used to round corners, with options like rounded-sm (2px), rounded-md (6px), and rounded-lg (8px).

• rounded-lg adds an 8px border radius to the section, softening its edges for a modern look.
• rounded-md applies a 6px border radius to the div with the ID btn-plus-minus, giving it a slightly tighter curve that pairs well with the thicker border.

Tailwind uses the text-{size} utility to control font sizes. The scale includes predefined sizes such as:

• text-xs = 12px
• text-sm = 14px
• text-base = 16px
• text-lg = 18px
• text-xl = 20px
• ...up to text-9xl = 128px

In this task:

• text-sm applies a 14px font size to the paragraph tag.
• text-xl applies a 20px font size to the h2 element.

Tailwind uses the text-{color} utility to set font colors. Most colors come with a shade scale ranging from 50 (lightest) to 950 (darkest). Examples include:
text-gray-50, text-gray-100, ..., text-gray-900.
Colors like text-white, text-black, and text-transparent don’t use shades.

In this task:

• text-gray-600 gives the item number a medium gray tone — subtle yet readable.
• text-teal-800 applies a dark teal color to the title, making it stand out and appear elegant.
• text-gray-700 is used for the author name, providing slightly darker contrast than the item number.

• font-serif applies a serif font, giving the title a classic, bookish appearance.
• Other available options in Tailwind include font-sans (default) and font-mono.

Tailwind uses the font-{weight} utility to control font thickness. Common values include:

• font-thin (100)
• font-light (300)
• font-medium (500)
• font-bold (700)
• font-extrabold (800)
• font-black (900)

In this task, font-bold applies a weight of 700 to the h2 tag, making the title visually prominent.

• text-sm applies a font size of 14px to the Remove button.
• text-lg applies a font size of 18px to the price paragraph.

• text-red-500 applies a medium red color to the Remove button, making it eye-catching yet subtle.
• text-gray-900 applies a near-black gray to the price paragraph, ensuring strong readability.

• The hover: prefix in Tailwind applies styles when the mouse hovers over an element.
• hover:text-red-800 changes the Remove button’s text color to a darker red (shade 800) on hover, providing visual feedback.

• font-medium applies a font weight of 500 to the Remove button.
• font-extrabold applies a font weight of 800 to the price paragraph, making it bold and prominent.

Tailwind CSS makes responsiveness easy with prefixes like sm:, md:, lg:, xl:, and 2xl: that apply styles at specific screen sizes (breakpoints). These correspond to media queries based on minimum widths:

• No prefix – The default style applies to all screen sizes (mobile-first approach).
• sm: – @media (min-width: 640px) { ... } (small screens, 640px+). Not used here, but useful for slightly larger phones.
• md: – @media (min-width: 768px) { ... } (medium screens, 768px+, like tablets). md:bg-blue-200 changes the background to light blue starting at 768px.
• lg: – @media (min-width: 1024px) { ... } (large screens, 1024px+, like desktops). lg:bg-teal-50 applies a very light teal background at 1024px and above.
• xl: – @media (min-width: 1280px) { ... } (extra-large screens, 1280px+). Not used in this example, but useful for wide displays.
• 2xl: – @media (min-width: 1536px) { ... } (very large screens, 1536px+). Also not used here, but ideal for ultra-wide layouts.

• On a phone (less than 768px), the main uses bg-purple-100 (default).
• On a tablet (768px to 1023px), it becomes md:bg-blue-200.
• On a desktop (1024px+), it changes to lg:bg-teal-50.

Tailwind’s mobile-first approach means the base style (bg-purple-100) applies to all screens by default, and each larger breakpoint overrides it progressively. You can stack responsive prefixes to create a smooth style transition across screen sizes.

This responsive behavior ensures that your page looks visually distinct and well-adapted on different devices, improving the user experience with minimal effort.