Frontend Meetup Munich : FrontMUC : Talk by @vannsl

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