Skip to content

Latest commit

 

History

History

tailwind

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

Tailwind CSS. But make it nice

🔗 Tailwind Docs

💭 Unordered thoughts during the session

  • first impression often overwhelming

    • 🔠🥬 "Buchstabensalat"
    • new devs may have a hard time finding components in the dev tools
    • a11y auditing might complain

  • ✨ Why Tailwind? many advantages/appealing concepts

    • "I didn't know any CSS" => Tailwind can be great to get started (and learn CSS on the way)

    • Adam Wathan wrote an article on the different stages of writing CSS. For a long time there was this "Separation of Concerns" with tailwind you have the styles right next to your element

    • No more coming up with class names

  • 🧠 Good to know

    • best utilised when used together with a framework (together with component structure)

    • there are helper classes with config

    • adhere to the MOIST 💧 principle: moderate overlap is sometimes tolerable (in contrast to DRY)

    • write semantic html! (it's good practice & helps e.g. with guidance in inspector)

    • in CSS the last statement counts (if there are multiple style definitions of e.g. h1). In Tailwind: configuration in tailwind file counts (not in html)

    • there are multiple helper libraries for different frameworks. E.g. twMerge to merge multiple tailwind strings

🤓 Examples

  • you need to enhance the border. There are 2 ways to change 'global' styles
    • you have something like a 'Base Box' Component (one pllace to change your style)
    • you use Design Tokens (with underlying Design System)
  • sometimes it's annoying that ‘shortcuts’ for e.g. setting colours cannot be used (bg-${color}-100)
    • ⚡️ tailwind needs to know its classes instantly
    • 💡 example hack: use tailwind config safelist to e.g introduce brand
    • or use an object to map all alternatives brand-1, brand-2

🛣️ **When in doubt...**it's always possible to write CSS

  • the systems work 'next to each other'

  • ...or write regular CSS first & translate into Tailwind in the 2nd step (helpful if you don't feel confident yet or write Animations, that can be difficult in Tailwind)

  • if you're at a dead end with standard tailwind:

    • style scope block, CSS properties

    • @apply (when in doubt, but don't overuse)

      Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse.

⭐️ Library Recommendation: CVA: Class Variance Authority (don't get scared off by the name ⚠️)

  • soon there will be a v1.0 => if you get started, do that with the beta v1.0 right away
  • generates a string of tailwind classes
  • put it next to your react component
  • example on website has weird naming (adjusted example below)
const buttonClasses = cva(["font-semibold", "border", "rounded"], { 
// ...  
  
buttonClasses({ intent: "secondary", size: "small" });
// => "font-semibold border rounded bg-white text-gray-800 border-gray-400 hover:bg-gray-100 text-sm py-1 px-2"