Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

How to build a static website in two and a half days with Nuxt and Tailwind CSS

167 Aufrufe

Veröffentlicht am

Frontend Meetup Munich : FrontMUC : Talk by @vannsl

Veröffentlicht in: Präsentationen & Vorträge
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

How to build a static website in two and a half days with Nuxt and Tailwind CSS

  1. 1. Static Pages with Nuxt & Tailwind CSS | @vannsl How to build a static website in two and a half days with Nuxt and Tailwind CSS
  2. 2. Vanessa Böhner Frontend Developer, Munich Product Engineer @ SinnerSchrader @vannsl @vannsl vannsl.io
  3. 3. Static Pages with Nuxt & Tailwind CSS | @vannsl Codebase github.com/Vannsl/ausbaufaehig-podcast
  4. 4. Static Pages with Nuxt & Tailwind CSS | @vannsl Background • Worked with Vue.js for about a year • Never worked with Nuxt • Never worked with any (Utility) CSS Framework • Never worked with other Material Design Components
  5. 5. Static Pages with Nuxt & Tailwind CSS | @vannsl Listen to Live Wine Podcast Go to Wine Event 😱😱😱
  6. 6. Static Pages with Nuxt & Tailwind CSS | @vannsl Create a homepage. Quickly. No server. Responsive. “CMS” possible Requirements
  7. 7. Static Pages with Nuxt & Tailwind CSS | @vannsl First Ideas
  8. 8. Static Pages with Nuxt & Tailwind CSS | @vannsl Further „Research“
  9. 9. Static Pages with Nuxt & Tailwind CSS | @vannsl Alternative VuePress (was partially inspired by Nuxt’s nuxt generate)
  10. 10. Static Pages with Nuxt & Tailwind CSS | @vannsl Tech Stack
  11. 11. Static Pages with Nuxt & Tailwind CSS | @vannsl What is Nuxt?
  12. 12. Static Pages with Nuxt & Tailwind CSS | @vannsl Authors Sébastian Chopin @Atunix Alexandre Chopin @_achopin
  13. 13. Static Pages with Nuxt & Tailwind CSS | @vannsl Idea • Vue CLI 3 hasn’t been there yet • Less time on configuration & more time on feature development
  14. 14. Static Pages with Nuxt & Tailwind CSS | @vannsl Modes universal SSR SPA static generated
  15. 15. Static Pages with Nuxt & Tailwind CSS | @vannsl Pre Rendering + =
  16. 16. Static Pages with Nuxt & Tailwind CSS | @vannsl Keywords - On top of vue transition: string | {} | () => {} head() {}layout: string | () => {} scrollToTop: bool asyncData() {} fetch() {} middleware: string validate() {} watchQuery: bool : []
  17. 17. Static Pages with Nuxt & Tailwind CSS | @vannsl Assets Webpacked ./assets background: url('~assets/ img/hero.jpg'); Static ./static ausbaufaehig-podcast.de/ feed.xml
  18. 18. Static Pages with Nuxt & Tailwind CSS | @vannsl What is Tailwind CSS?
  19. 19. Static Pages with Nuxt & Tailwind CSS | @vannsl Tailwind CSS Adam Wathan @adamwathan A Utility-First CSS Framework for Rapid UI Development
  20. 20. Static Pages with Nuxt & Tailwind CSS | @vannsltailwindcss.com
  21. 21. Static Pages with Nuxt & Tailwind CSS | @vannsltailwindcss.com • Layout • Typography • Backgrounds • Borders • Flexbox • Spacing • Sizing • Tables • Interactivity • …
  22. 22. Static Pages with Nuxt & Tailwind CSS | @vannsltailwindcss.com
  23. 23. Static Pages with Nuxt & Tailwind CSS | @vannsl
  24. 24. Static Pages with Nuxt & Tailwind CSS | @vannsl Companies using Tailwind CSS Sources
  25. 25. Static Pages with Nuxt & Tailwind CSS | @vannsl Mix Utility with Component Classes
  26. 26. Static Pages with Nuxt & Tailwind CSS | @vannsl Mixed Sources 👍 🤔 Naming Collisions 🥺
  27. 27. Static Pages with Nuxt & Tailwind CSS | @vannsl Prefix
  28. 28. Static Pages with Nuxt & Tailwind CSS | @vannsl Pseudo Classes & Custom Variables
  29. 29. Static Pages with Nuxt & Tailwind CSS | @vannsl hover: active: focus: …
  30. 30. Static Pages with Nuxt & Tailwind CSS | @vannsl Custom Classes What if a class is “missing”?
  31. 31. Static Pages with Nuxt & Tailwind CSS | @vannsl
  32. 32. Static Pages with Nuxt & Tailwind CSS | @vannsl Variants tailwind.js
  33. 33. Static Pages with Nuxt & Tailwind CSS | @vannsl Group Hover tailwind.css - Group Hover
  34. 34. Static Pages with Nuxt & Tailwind CSS | @vannsl Media Queries
  35. 35. Static Pages with Nuxt & Tailwind CSS | @vannsl Problem
  36. 36. Static Pages with Nuxt & Tailwind CSS | @vannsl PurgeCSS npm i nuxt-purgecss Remove unused CSS
  37. 37. Static Pages with Nuxt & Tailwind CSS | @vannsl
  38. 38. Static Pages with Nuxt & Tailwind CSS | @vannsl Solution 330 KiB 34 KiB
  39. 39. Static Pages with Nuxt & Tailwind CSS | @vannsl File size matters The page has 2.4 MB! 2.4 MB 2.1 MB 960 kB
  40. 40. Static Pages with Nuxt & Tailwind CSS | @vannsl Lighthouse
  41. 41. Static Pages with Nuxt & Tailwind CSS | @vannsl
  42. 42. Static Pages with Nuxt & Tailwind CSS | @vannsl Thanks 🙏 ausbaufaehig-podcast.de

×