Sort classes generally from the outside in (in terms of the box model) putting things that affect layout before things that don't, while also trying to group related classes. This lets you see the things that are going to have the biggest impact quickly.
🟣 CSS Quick Tip: min() and max() Use these CSS functions to responsively adjust: - element width - border width - padding - margin - ...and more! Review the CSS comments in this @CodePen for more details: https://t.co/EptxEmQYFd
💡 #Laravel + #TailwindCSS tip/gotcha: If you use inline Blade component views, you will want to add the path to your components to Tailwind's purge config, especially if using JIT. This way Tailwind won't miss any classes you might have in the inline component.
🔥 Quick tip on how to improve your glassmorphism design: 1. Add a gradient to the borders. 2. Add a noise layer to the background.
🔥 Tip: You can use CSS variables and dark mode in SVG files, including SVG files used for the favicon. 👇 This code is all you need to get a favicon that changes colors when dark mode gets enabled
5. Inline styles can’t be processed while TailwindCSS is processed using PostCSS
6. Inline styles don’t cache well
8. Inline styles are one thing at a time.
7. Inline styles are unlimited. There are no rules, no guidelines, no design system, and no way to enforce anything.
2. Inline styles cannot add pseudo-classes like hover or focus styles
1. Inline styles only apply to the elements they’re declared on.
4. Inline styles don’t have access to media queries.