TailwindCSS

Just like bootstrap, take advantage of existing CSS classes rather than writing your own when reasonable. Here are some nice (free!) component libraries that use Tailwind:

• https://merakiui.com/components
• https://daisyui.com/components/toggle/]

Useful gradient tutorial
https://blog.logrocket.com/guide-adding-gradients-tailwind-css/#adding-text-gradients

Handling hover, dark mode, and more

Tailwind allows you to use modifiers for various classes. Think of them as if statements. For example hover:bg-sky-700 would use the bg-sky-700 on hover. Additionally, these can be stacked for more specific situations like so: dark:md:hover:bg-fuchsia-600.

What modifiers are available? (examples)

• Pseudo-classes: :hover, :focus, :first-child, and :required
• Pseudo-elements: ::before, ::after, ::placeholder, and ::selection
• Media and feature queries, like responsive breakpoints (md, lg), dark mode, and prefers-reduced-motion

Base

• p-# - padding
• px-#, py-#, - padding top/bottom, padding left/right
• space-x-#, space-y-# - space between child elements (by adding a margin to each child)
• relative, absolute, static, fixed - position classes
• items-center, items-start, ... - sets align-items
• leading-# - line height
• bg-red-500-5 - color value of red-500 and opacity of 5%

Height/Width

• h-#, w-# - height, width (4 is 1 rem or 16px)
• h-full, w-full - stands for 100%
• max-w-#, max-h-# - max width/height

Flex

• flex - assigns display: flex
• flex-col, flex-row, flex-??-reverse - sets the flex direction
• flex-wrap - allows wrapping
• flex-nowrap - allows overflowing

Display

• block - separate line, fill parent
• inline-block - wrap text (to prevent extending beyond parent)
• inline - wrap normally
• flex - block level flex container
• inline-flex - flows with text
• table
• grid
• hidden

Grid

• grid
• grid-cols-# - num columns
• gap-# - gap between columns
• col-span-# - how many columns the element will take up

Animation

• ease-in, ease-out, ease-in-out

Tidbits

You can apply tailwind classes in a CSS rule (as opposed to html class) directly using the @apply directive. For example @apply border border-red-500/50 bg-red-500/5;.

Config

The tailwind.config.mjs can be used to extend or directly change the existing default configuration. It should look something like this:

export default {
    content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
    theme: {
	    colors: {
		    'blue': '#1fb6ff',
	    },
		extend: {
			colors: {
				banana: ('--banana'),
				'pthalo-green': '#123524',
			}
		}

Notice how this both modifies an existing color (blue), and adds two new ones in two different ways.

1. A standard object key banana, with works without quotes. Additionally, rather than being assigned an explicit value, it uses a CSS variable --banana from the file(s) that use this class.
2. A string, which uses quotes. Good for reserved words or special characters.
   Tailwind will automatically generate these classes based on a relevant prefix. For example, colors is associated with bg-*, text-*, border-* and will fill in that wildcard making classes like bg-pthalo-green and text-banana. You may also nest these definitions as needed to create more variations like bg-banana-ripe and bg-banana-unripe.