Tailwind CSS

Tailwind CSS

by Ivaylo Gerchev
Released April 2022
Publisher(s): SitePoint
ISBN: 9781925836516

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Get a rapid introduction to Tailwind, the utility-first CSS framework, and start building sites with it today!

For many years, component-based frameworks, like Bootstrap, were the de facto standard for building websites quickly and easily. But all this magic comes with a price. Without serious customization, sites built with such frameworks look similar to each other. And customization is a real pain in the neck for anyone who wants to build something more complex or creative. Component-based styles are easy to implement, but inflexible and confined to certain boundaries. Solving specificity issues while trying to override the default styles of a particular framework isn't a fun and productive job. Tailwind is a utility-first framework that is built with low-level functionality in mind. As you'll see in this book, utility classes offer much more power and flexibility than component classes. You'll learn:

  • Component vs utility classes, and the pros and cons of each
  • Tailwind basics (layout, typography, responsive web design, colors, and more)
  • Creating your own Tailwind components
  • Building complex and flexible layouts with Tailwind's Grid utilities
  • Customizing Tailwind
  • Working with Tailwind plugins
  • And much more!

Publisher resources

View/Submit Errata

Table of contents

  1. Crafting HTML Email: Beautiful Emails That Work Everywhere
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. About the Author
  7. Preface
    1. Conventions Used
      1. Code Samples
      2. Tips, Notes, and Warnings
    2. Supplementary Materials
  8. Getting Started with Tailwind CSS
    1. Component vs Utility Classes
    2. What Is Tailwind?
      1. What Is a Utility Class?
    3. What a Design System Is, and How It Can Help Us
    4. Up and Running with Tailwind
      1. Know Your HTML and CSS
    5. Exploring Tailwind Basics
      1. Responsive Web Design
      2. Layout
      3. Typography
      4. Colors
      5. Imagery: Icons and Images
    6. Building a Blog Starter Template
      1. Utility Class Help
      2. Base Styles
      3. Creating the Header
        1. The Design Process
  9. Chapter 2: Going Beyond the Basics
    1. Getting Started with Tailwind
      1. Project Code
      2. Getting Ready
      3. Utility Class References
      4. Base Styles
      5. npx
    2. Creating Tailwind Components
      1. Extracting Classes into Reusable Components
      2. Building Tailwind Components with Vue
        1. Learning Vue
        2. Rebuilding Styles
  10. Chapter 3: Building Complex Designs with Tailwind
    1. Building Complex and Flexible Layouts with Tailwind’s Grid Utilities
      1. CSS Grid
      2. Project Code
      3. Exploring Tailwind’s Grid Utilities
        1. Numbering Grid Lines
      4. Creating Grid Layouts
        1. Demo Styles
    2. Creating a Complete Article Design
      1. Creating the Base Layout
        1. Abbreviated Text
      2. Typography
      3. Colors and Gradients
    3. Adding Image Effects
    4. Adding Effects
    5. Conclusion
  11. Chapter 4: Customizing Tailwind and Optimizing Your Workflow
    1. Customizing Tailwind
      1. Project Code
    2. Customizing the Default Tailwind Theme
      1. Customizing Tailwind Theme’s Responsive Breakpoint Modifiers
      2. Customizing Tailwind’s Theme Colors
        1. Naming Colors
      3. Customizing Tailwind’s Spacing Utilities
      4. Customizing Tailwind’s Core Plugins
        1. Default Key
    3. A Practical Customization Example
    4. Adding Base Classes
      1. Rebuilding Styles
    5. Creating Configuration Presets
      1. Rebuilding Styles
      2. Merging
    6. Conclusion
  12. Chapter 5: Working with Tailwind Plugins
    1. Getting Started
      1. Project Code
    2. Using Official Tailwind Plugins
      1. Don’t Forget prose
    3. Building Custom Tailwind Plugins
      1. Running dev:watch
      2. Creating the Counters Plugin
        1. The .js Extension
      3. Creating the Arrows Plugin
        1. Using prose for Readability
    4. Finding Community Plugins
    5. Conclusion

Product information

  • Title: Tailwind CSS
  • Author(s): Ivaylo Gerchev
  • Release date: April 2022
  • Publisher(s): SitePoint
  • ISBN: 9781925836516