
Tailwind CSS
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
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!
More details
Person
Ivaylo Gerchev isa web developer/designer from Bulgaria. In his free time he likes to write articles and tutorials sharing his knowledge and understanding on various web development topics. His favorite topics include UI, UX, SVG, HTML, CSS, Tailwind, JavaScript, Node, Nest, Adonis, Vue, React, Angular, PHP, Laravel, and Statamic. The best tools he uses are Figma and VS Code. When he's not programming the Web, he loves to program his own reality.
Content
- Crafting HTML Email: Beautiful Emails That Work Everywhere
- Notice of Rights
- Notice of Liability
- Trademark Notice
- About SitePoint
- About the Author
- Preface
- 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
System requirements
File format: ePUB
Copy protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (not Kindle).
The file format ePub works well for novels and non-fiction books – i.e., „flowing” text without complex layout. On an e-reader or smartphone, line and page breaks automatically adjust to fit the small displays.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our ebook Help page.