Tech talk on Tailwind CSS
1 like3,765 views
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.
Tech talk on Tailwind CSS
- 1. Tailwind CSS A utility-first CSS framework for rapidly building custom designs. Sachin Sharma (Senior Frontend Engineer) [email protected]
- 2. Tailwind is definitely the 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 npm install 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.
- 5. Component Examples ● Alerts box ● Buttons ● Cards ● Forms ● Grids ● Navigation
- 6. Demo session
- 7. ∎ Responsive to the core ∎ Component-friendly ∎ Designed to be customized Advantage of the Tailwind CSS framework
- 8. Designed to be customized Responsive to the core Component-friendly