Skip to Main Content
Modern CSS with Tailwind, 2nd Edition
book

Modern CSS with Tailwind, 2nd Edition

by Noel Rappin
May 2022
Intermediate to advanced content levelIntermediate to advanced
104 pages
2h 24m
English
Pragmatic Bookshelf
Content preview from Modern CSS with Tailwind, 2nd Edition

Background Color

Tailwind’s background color is similar to text color and border color: the pattern is bg-{color}, and uses the same color names as the other groups (bg-red-700 or bg-orange-300). Tailwind also provides bg-{color}/{opacity} with the same steps as text opacity. As in other places, you can use arbitrary values via square brackets for the color (bg-[#cdcdcd]) or the opacity (bg-red-700/[43]).

Shadows

Technically, a box shadow isn’t a background color, but it’s sort of used like one. Tailwind provides a few utilities to manage the box shadow. The base utility, shadow, effectively creates a 10% opacity black border that’s 1-pixel vertically offset, with a 3-pixel width. You can then make that smaller with the xs and sm modifiers or ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Tailwind CSS

Tailwind CSS

Ivaylo Gerchev
CSS in Depth

CSS in Depth

Keith Grant
Tiny CSS Projects

Tiny CSS Projects

Michael Gearon, Martine Dowden

Publisher Resources

ISBN: 9781680509892Errata Page