Tailwind

• Different approach from Bootstrap
• Bootstrap defines a set of “complete” components (e.g., btn).
  • That class provides all the necessary styling for a button.
  • Customizing that styling can be tricky.
• In contrast, Tailwind focuses on “utility classes”: “single-purpose presentational classes” that you can put right into HTML.
  • e.g., text-center, bg-white.
• At first, this may seem like thinly-disguised inline CSS, but
  • The provided utility classes provide some constraints that help consistency
  • inline styles can’t target states like hover or focus
  • inline styles can’t use media queries.
  • https://tailwindcss.com/docs/styling-with-utility-classes
• Other arguments:
  • Some duplication can be removed by adding loops (like in React)
  • Website claims that multi-cursor editing is sometimes the best solution.
    • (I’m not sure I buy that.)
  • Often duplication can be refactored into a React Component, or erb template partial.
• Tailwind scans your code and generates CSS with the necessary classes.
• Responsive aspects similar to Bootstrap:
  • Prefix like sm: means “small and above”
• Interesting color pallette: https://tailwindcss.com/docs/colors
• Preflight puts a set of opinionated styles on all elements.
• To install:
  • Typically integrated into your framework.
  • can also use the command-line tool:
    • https://tailwindcss.com/docs/installation/tailwind-cli