Pre-Talk
(They found the badges! Shirts will be handed out at the after-party)
Justin's introducing Adam right now! Warm welcome to Adam Wathan!
Start of talk
When trying to build a chat notification, you might right a lot of html and "chat-notification"
Instead of writing custom CSS, tailwind is an API for your design system. Everything in your tailwind config file shows what you have available. No mucking about in CSS
A bit different, but maintain CSS is hard, editing HTML is easy
Today, we're going to be talking about priciples and practices I use.
Extract Components, Not Classes
Common things folks run into is wanting to use 13 classes for all the buttons that you have. Cool feature. Head to app.css file...instead of writing CSS by hand, write class, @apply, and you're good to go
Looking at cards...example is @foreach. COmponents good for a single source of truth, but when a foreach loop for only one thing, maybe don't extract it unless you start using it in other places.
Still need to worry about HTML structure though. Idea is to extract blade partial or vue component; you can still change the class list for everything AND HTML structure. Parameterizable too, so you can do @include('partials.destination-card', ['destination' => $destination]) and it still works.
First thing to keep in mind.
No Sass? No problem.
Used to build-time imports and nesting and stuff like that, but don't want to lose that sort of stuff with Tailwind.
Instead of using a pre-processor, using postCss, then requiring postcss-import, tailwindcss, postcss-nested.
Include app.css components.css file with the @apply classes, and you can organize components into your own files.
Head over to other URL here...rendering markdown with it
Markdown with tailwind...how to do? Use a .markdown class that sets basic typography, style each individual element as a nested class.
Mirrors structure a little better, not mixing tools (which can prevent gotchas)
Use SVG like it's going out of style
Icons. Using inline SVG means you can add classes to the svg elements. Change the classes, changes the SVG!
HTML is where you're building your UI. fill-current class gives your SVG the parent's color, so you can compose everything in HTML. No custom CSS!
In second half, create SVG shape to overlay on image...
<img class="absolute inset-0 h-full w-full object-cover object-center" />
<svg class="absolute inset-y-0 h-full fill-current text-gray-100 w-32 -ml-16" preserveAspectRatio="none" viewBox="0 0 100 100">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>Allows you to do a slanted border edge on image, looks cool
Don't be afraid to extend the framework
"How can you not have this feature?" Well, either it wasn't planned or it's specific to a site. Guides for extending it.
"What is my design system missing? How can I extend the API?"
Example, motion system. utilities.css with a variants thing
@variants responsive {
.origin-top {
transform-origin: top;
}
}What might I need? also transition-color, origin-bottom, transition-opacity, transition-all, ease-in, scale-25...try not to have to come back and have to update the CSS for everything.
What a lot of people will do with vue is add transition class. Instead of giving transition name, give it enter-active-class, leave-active-class, enter-class, leave-class, enter-to-class, leave-to-class. Put transitions on the transition component, nest what you want transitioned
<transition
enter-active-class="transition-all transition-fastest ease-out"
leave-active-class="transition-all transition-faster ease-in"
enter-class="opacity-0 scale-75"
enter-to-class="opacity-100 scale-100"
leave-class="opacity-100 scale-100"
leave-to-class="opacity-0 scale-75"
>
<div></div>
</transition>Prefer inline styles to custom classes
Let's take an example of an image that looks like a blue porkchop. bg-blue-porkchop on a hero? Mayyyybe not.
Here's how ... in a blob.blade.php, SVG describes the logo. Style to update it for a customized . Can't do media queries in inline, but you can duplicate the SVG and use classes to hide/show at different break points. Fine-tune by hand. Do as much in HTML
Removing unused classes with PurgeCSS
Supposed to contain everything you need, but you don't need every class. Might use mt-4, but not mt-8.
// At top of webpack.mix.js
require('laravel-mix-purgecss');