Vue components with Tailwind
Colin Schwarz
Frontend Engineer, Mimacom
cnschwarz
cnschwarz12
CSS is EASY
for people who love it.
for others, it's a nightmare.
We need TOOLS for
DOING IT faster, AND TOGETHER!
CSS Methodology
- Components oriented
- Hierarchical elements inside blocks using modifiers
- Customisable using preprocessors or custom CSS properties
- Semantic CSS classnames
OOCSS
SMACSS
BEM
Taken from @simonswiss talk
CSS FrameWORKS
- Sets of specific and generic classnames
- Sets of components
- Customizable using preprocessor
- Pluginable
- Semantic CSS classnames
BULMA
FOUNDATION
BOOTSTRAP
UTILITY-FIRST CSS
- Sets of ultra-generic classnames
- Sets of components (with TailwindUI)
- Customisable using (s)css or javascript configuration
- Pluginable
- Presentational CSS classnames
TAILWIND
WHAT MAKES TAILWILD SO DIFFERENT ?
- One class per CSS property
- Each class has variants and are responsive
- Build reusable style using css or Javascript
- Extracting for reusable components
- Precise configuration for optimisations
- High velocity for styling things !
One class per CSS property
Each class Has variants
Hover
Disabled
Responsive
Build BASE style
using CSS or javascript
CSS
javascript
Build UTILITY style
using CSS or javascript
javascript
CSS
Extracting for
reusable components
MADE for OPTIMISATIONS
Biggest criticism and arguments against it
But isn't this just inline style...?!
It violates separation of concerns
It's unmaintainable
It bloats the HTML
BEM is enough
WRAP-UP
- TailwindCSS is fun and useful
- It makes styling readable and fast
- Very verbose without extraction
- Prototyping easily
- Customisable with Javascript and CSS
Demo
Collection for Atomic / Utility-first CSS
https://johnpolacek.github.io/the-case-for-atomic-css/
Sources
- https://tailwindcss.com/docs/
- https://frontstuff.io/in-defense-of-utility-first-css
- https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
- https://www.youtube.com/watch?v=D84pmKtQB3w
- https://github.com/tailwindlabs/tailwindcss-from-zero-to-production
- https://www.youtube.com/watch?v=2-q4asoHUqU
Vue Komponenten mit Tailwind
By ignotus