Setting sail with tailwindcss

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.

0ea6a91da3148b189f2a37e78b9cb961?s=128

Ramesh Mhetre

September 15, 2020
Tweet

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