Downloaded 63 times
Uploaded bySquareboat
Tech talk on Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows for rapidly building custom designs using utility classes rather than pre-designed components. It provides low-level utility classes that can be used to style self-created components and build completely custom designs directly in HTML without needing to leave the file. The document then outlines how to install Tailwind CSS, its workflow, examples of how to build common components like alerts and buttons, and advantages like being responsive, customizable and friendly for building components.
More Related Content
Tech talk on Tailwind CSS
- 1. Tailwind CSS A utility-firstCSS framework for rapidly building custom designs. Sachin Sharma (Senior Frontend Engineer) [email protected]
- 2. Tailwind is definitelythe most popular UTILITY CSS Library. While Bootstrap gives pre-styled components, Tailwind gives us utility classes which we can use to style our created components and create classes based on these utility classes. The biggest benefit is that while most Bootstrap sites look pretty much the same, Tailwind sites can have your unique imprint. Tailwind is different. Instead of opinionated pre-designed components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML. Why Tailwind?
- 3. INSTALLATION # Using npm npminstall tailwindcss # Using Yarn yarn add tailwindcss # Using CDN Link <link href="https://unpkg.com/tailwindcss@^1.0/di st/tailwind.min.css" rel="stylesheet"> Quick start guide for installing and configuring Tailwind CSS.
- 4.
- 5. Component Examples ● Alerts box ●Buttons ● Cards ● Forms ● Grids ● Navigation
- 6.
- 7. ∎ Responsive tothe core ∎ Component-friendly ∎ Designed to be customized Advantage of the Tailwind CSS framework
- 8. Designed to be customized Responsiveto the core Component-friendly
- 9.
- 10.