Modern CSS with Tailwind: Flexible Styling without the Fuss

This document was uploaded by one of our users. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form.

Simply click on the Download Book button.

Yes, Book downloads on Ebookily are 100% Free.

Sometimes the book is free on Amazon As well, so go ahead and hit "Search on Amazon"

Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex effects. With Tailwind, you can style your text, move your items on the page, design complex page layouts, and adapt your design for devices from a phone to a wide-screen monitor. With this book, you'll learn how to use the Tailwind for its flexibility and its consistency, from the smallest detail of your typography to the entire design of your site.

With CSS, you can do amazing things to the basic text and images on your website, and with just a little bit of client-side code to add and remove CSS classes, you can do exponentially more. CSS can also be hard to debug, complicated to write, and hard to maintain - �?�but it doesn't have to be. With Tailwind, you can minimize the amount of CSS you need to write, making it easier to control and debug, and yet still enjoy full flexibility and consistency across your site. Use Tailwind to build complex page layouts, add responsive design that adjusts to different screen widths, and dramatically reduce the amount of CSS you need.

The Tailwind setup is extremely explicit, and makes it possible to understand the display just by looking at the HTML markup. Start by designing the typographic details of the individual elements, then placing and manipulating those elements in "the box" - the rectangle of space each element takes up on screen - using a flexbox or grid design. Move those elements around the page with helpful small animations and transitions. With Tailwind, it's easy to prototype, iterate, and customize your display. Use prefixes to specify behavior. Change defaults, add new behavior, or integrate with legacy CSS.

Use Tailwind to make extraordinary web designs without extraordinary effort.

What You Need:

This book is about Tailwind 2.0. You need to be able to install Ruby on Rails to run the sample app.

Author(s): Noel Rappin
Edition: 1
Publisher: Pragmatic Bookshelf
Year: 2021

Language: English
Commentary: Vector PDF
Pages: 90
City: Raleigh, NC
Tags: CSS; Tailwind

Cover
Table of Contents
Acknowledgments
Introduction
Why Tailwind?
About This Book
Who This Book Is For
Running the Sample App
1. Getting Started with Tailwind
Installing Tailwind
Quick Start
2. Tailwind Basics
Utilities
Preflight
Duplication
Prefixes
CSS Units
3. Typography
Size and Shape
Color and Opacity
Alignment and Spacing
Lists
Typography Plugin
Tailwind Forms
4. The Box
Can You See the Box?
What’s in the Box?
Padding and Margins
Borders
Background Color
Background Images
Height and Width
5. Page Layout
Containers
Floats and Clears
Position and Z-Index
Tables
Grids
Flexbox
Box Alignment
6. Animation
Helpful Small Animations
Transitions
Transformation
Other Appearance Things
7. Responsive Design
Tailwind Screen Widths and Breakpoints
Hide Based on Size
Fewer Grid Columns on Small Devices
Flex on Larger Devices
8. Customizing Tailwind
Configuration File Basics
Change Default Values
Change Generated Classes
Configure Variant Prefixes
Integrate with Existing CSS
Access Tailwind from JavaScript
Purge CSS
The End