How to build a static website in two and a half days with Nuxt and Tailwind CSS
•
1 like•725 views
The document discusses building a static website in two and a half days using Nuxt and Tailwind CSS. Nuxt allows building static sites with Vue components, and Tailwind CSS is a utility-first CSS framework. The author had no experience with either but was able to create responsive pages for a podcast site that met requirements. Key features of Nuxt include pre-rendering, layouts, and assets handling. Tailwind CSS provides utilities for layout, typography, backgrounds and more. PurgeCSS was used to remove unused CSS and reduce file sizes.
Report
Share
How to build a static website in two and a half days with Nuxt and Tailwind CSS
- 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. Vanessa Böhner Frontend Developer, Munich Product Engineer @ SinnerSchrader @vannsl @vannsl vannsl.io
- 3. Static Pages with Nuxt & Tailwind CSS | @vannsl Codebase github.com/Vannsl/ausbaufaehig-podcast
- 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. Static Pages with Nuxt & Tailwind CSS | @vannsl Listen to Live Wine Podcast Go to Wine Event 😱😱😱
- 6. Static Pages with Nuxt & Tailwind CSS | @vannsl Create a homepage. Quickly. No server. Responsive. “CMS” possible Requirements
- 7. Static Pages with Nuxt & Tailwind CSS | @vannsl First Ideas
- 8. Static Pages with Nuxt & Tailwind CSS | @vannsl Further „Research“
- 9. Static Pages with Nuxt & Tailwind CSS | @vannsl Alternative VuePress (was partially inspired by Nuxt’s nuxt generate)
- 10. Static Pages with Nuxt & Tailwind CSS | @vannsl Tech Stack
- 11. Static Pages with Nuxt & Tailwind CSS | @vannsl What is Nuxt?
- 12. Static Pages with Nuxt & Tailwind CSS | @vannsl Authors Sébastian Chopin @Atunix Alexandre Chopin @_achopin
- 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. Static Pages with Nuxt & Tailwind CSS | @vannsl Modes universal SSR SPA static generated
- 15. Static Pages with Nuxt & Tailwind CSS | @vannsl Pre Rendering + =
- 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. Static Pages with Nuxt & Tailwind CSS | @vannsl Assets Webpacked ./assets background: url('~assets/ img/hero.jpg'); Static ./static ausbaufaehig-podcast.de/ feed.xml
- 18. Static Pages with Nuxt & Tailwind CSS | @vannsl What is Tailwind CSS?
- 19. Static Pages with Nuxt & Tailwind CSS | @vannsl Tailwind CSS Adam Wathan @adamwathan A Utility-First CSS Framework for Rapid UI Development
- 20. Static Pages with Nuxt & Tailwind CSS | @vannsltailwindcss.com
- 21. Static Pages with Nuxt & Tailwind CSS | @vannsltailwindcss.com • Layout • Typography • Backgrounds • Borders • Flexbox • Spacing • Sizing • Tables • Interactivity • …
- 22. Static Pages with Nuxt & Tailwind CSS | @vannsltailwindcss.com
- 23. Static Pages with Nuxt & Tailwind CSS | @vannsl
- 24. Static Pages with Nuxt & Tailwind CSS | @vannsl Companies using Tailwind CSS Sources
- 25. Static Pages with Nuxt & Tailwind CSS | @vannsl Mix Utility with Component Classes
- 26. Static Pages with Nuxt & Tailwind CSS | @vannsl Mixed Sources 👍 🤔 Naming Collisions 🥺
- 27. Static Pages with Nuxt & Tailwind CSS | @vannsl Prefix
- 28. Static Pages with Nuxt & Tailwind CSS | @vannsl Pseudo Classes & Custom Variables
- 29. Static Pages with Nuxt & Tailwind CSS | @vannsl hover: active: focus: …
- 30. Static Pages with Nuxt & Tailwind CSS | @vannsl Custom Classes What if a class is “missing”?
- 31. Static Pages with Nuxt & Tailwind CSS | @vannsl
- 32. Static Pages with Nuxt & Tailwind CSS | @vannsl Variants tailwind.js
- 33. Static Pages with Nuxt & Tailwind CSS | @vannsl Group Hover tailwind.css - Group Hover
- 34. Static Pages with Nuxt & Tailwind CSS | @vannsl Media Queries
- 35. Static Pages with Nuxt & Tailwind CSS | @vannsl Problem
- 36. Static Pages with Nuxt & Tailwind CSS | @vannsl PurgeCSS npm i nuxt-purgecss Remove unused CSS
- 37. Static Pages with Nuxt & Tailwind CSS | @vannsl
- 38. Static Pages with Nuxt & Tailwind CSS | @vannsl Solution 330 KiB 34 KiB
- 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. Static Pages with Nuxt & Tailwind CSS | @vannsl Lighthouse
- 41. Static Pages with Nuxt & Tailwind CSS | @vannsl
- 42. Static Pages with Nuxt & Tailwind CSS | @vannsl Thanks 🙏 ausbaufaehig-podcast.de