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