Setting sail with tailwindcss

Introduction to TailwindCSS which is a utility-first CSS framework for rapidly building custom designs.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Transcript

1. Setting sail with tailwindcss Ramesh Mhetre
2. About me • Full Stack Engineer • I like to build things on the side • Fanboy of NuxtJS, Laravel, Tailwindcss & Serverless • Sr.Software Engineer @ Tradebyte GmbH • @mhetreramesh • https://fullstackworld.com
3. Agenda • Introduction to tailwindcss • What is utility-first? • Getting started with tailwindcss • Let’s code • Community examples • Customization • Tailwindcss resources • QA
4. Introduction to tailwindcss
5. Introduction • A utility-first CSS framework for rapidly building custom designs • Responsive to the core • Gives you all of the building blocks for unique designs • Designed to be customized • No annoying opinionated styles you have to fight to override • Freedom to focus on design not on the framework boundaries
6. What is utility-first?
7. Utility first • Utility first is all about what kind of CSS classes and what they do (not on how they look) • Classes for things like margin, padding, border, background, shadow • These classes are easy to use & have a big impact on the design • Most of the classes are self-explanatory • Each class does only one thing
8. Utility classes examples
9. Getting Started
10. Installation
11. Tailwind config Having tailwind.config.js for your project is optional
12. Tailwindcss utility classes • Spacing - Margin, Padding • Sizing - Height, Width • Typography • Colors & Backgrounds • Flex & Grids
13. Let’s build something Codepen session
14. Let’s make it responsive Back to codepen
15. Community examples Community created clones
16. Customization
17. Customization
18. TailwindCSS Resources
19. TailwindCSS Resources • Official website, docs, blog, screencast • TailwindUI, beautiful UI components from the creators of the framework • Tailwind.run(), online fiddling tool exclusively for tailwindcss • Tailwindcomponents, community made open source components • Awesome TailwindCSS, list of hundreds of resources for tailwindcss • Heroicons SVG icon library from the creator of the tailwindcss
20. Questions?
21. Thank you! Ramesh Mhetre https://twitter.com/mhetreramesh