Tailwind Styling

<Text className="text-2xl font-bold text-blue-600">
  Styled text
</Text>

<Text className="text-red-500">Red</Text>
<Text className="text-blue-700">Dark blue</Text>
<Text className="text-green">Green (defaults to 500)</Text>

<Text className="font-bold">Bold</Text>
<Text className="italic">Italic</Text>
<Text className="underline">Underline</Text>
<Text className="line-through">Strikethrough</Text>
<Text className="uppercase">ALL CAPS</Text>
<Text className="lowercase">lowercase</Text>
<Text className="capitalize">Small Caps</Text>

<Text className="text-xs">Extra small</Text>
<Text className="text-sm">Small</Text>
<Text className="text-base">Base</Text>
<Text className="text-lg">Large</Text>
<Text className="text-xl">Extra large</Text>
<Text className="text-2xl">2XL</Text>

<Text className="font-sans">Sans-serif</Text>
<Text className="font-serif">Serif</Text>
<Text className="font-mono">Monospace</Text>

<Text className="font-thin">Thin</Text>
<Text className="font-extralight">Extra light</Text>
<Text className="font-light">Light</Text>
<Text className="font-normal">Normal</Text>
<Text className="font-medium">Medium</Text>
<Text className="font-semibold">Semibold</Text>
<Text className="font-bold">Bold</Text>
<Text className="font-extrabold">Extra bold</Text>
<Text className="font-black">Black</Text>

<Paragraph>
  H<Text className="align-sub text-xs">2</Text>O
</Paragraph>

<Paragraph>
  E = mc<Text className="align-super text-xs">2</Text>
</Paragraph>

<Text className="tracking-tight">Tight</Text>
<Text className="tracking-normal">Normal</Text>
<Text className="tracking-wide">Wide</Text>
<Text className="tracking-widest">Widest</Text>

<Paragraph className="text-left">Left</Paragraph>
<Paragraph className="text-center">Center</Paragraph>
<Paragraph className="text-right">Right</Paragraph>
<Paragraph className="text-justify">Justified</Paragraph>

<Paragraph className="mt-4">Margin top</Paragraph>
<Paragraph className="mb-4">Margin bottom</Paragraph>
<Paragraph className="mt-4 mb-2">Both</Paragraph>

<Paragraph className="ml-8">Left indent</Paragraph>
<Paragraph className="mr-8">Right indent</Paragraph>
<Paragraph className="indent-4">First line indent</Paragraph>

<Paragraph className="leading-tight">Tight lines</Paragraph>
<Paragraph className="leading-normal">Normal lines</Paragraph>
<Paragraph className="leading-loose">Loose lines</Paragraph>

<Paragraph className="bg-yellow-100">
  Highlighted paragraph
</Paragraph>

<Table className="border">
  <Tbody>
    <Tr>
      <Td className="border">Cell with border</Td>
      <Td className="border-2">Thicker border</Td>
    </Tr>
  </Tbody>
</Table>

<Td className="border border-red-500">Red border</Td>
<Td className="border-b-2 border-blue-700">Blue bottom border</Td>

<Td className="border border-solid">Solid (default)</Td>
<Td className="border border-dashed">Dashed</Td>
<Td className="border border-dotted">Dotted</Td>
<Td className="border border-double">Double</Td>
<Td className="border-none">No border</Td>

<Td className="border-b border-b-dashed">Dashed bottom</Td>
<Td className="border-t border-t-dotted">Dotted top</Td>

<Td className="p-2">All sides</Td>
<Td className="px-4 py-2">Horizontal and vertical</Td>
<Td className="pt-2 pb-4">Top and bottom</Td>

<Td className="align-top">Top</Td>
<Td className="align-middle">Middle</Td>
<Td className="align-bottom">Bottom</Td>

<Th className="bg-gray-100">Header cell</Th>
<Td className="bg-red-50">Highlighted cell</Td>

<Image src={data} width="4in" height="3in" className="object-cover" />
<Image src={data} width="4in" height="3in" className="object-contain" />

<Image src={data} width="4in" className="aspect-video" />
<Image src={data} width="4in" className="aspect-square" />
<Image src={data} width="4in" className="aspect-[3/2]" />

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
      },
    },
  },
};

<Text className="text-brand-500">Brand color</Text>
<Paragraph className="bg-brand-50">Brand background</Paragraph>

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        heading: "Georgia",
        code: ["Fira Code", "Consolas", "monospace"],
      },
    },
  },
};

<Text className="font-heading">Georgia text</Text>
<Text className="font-code">Monospace text</Text>

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontSize: {
        huge: "4rem",
        tiny: "0.5rem",
      },
    },
  },
};

<Text className="text-huge">Big text</Text>
<Text className="text-tiny">Small text</Text>

<Text className="text-red-500 text-blue-500">Blue (last wins)</Text>
<Text className="text-sm text-lg">Large (last wins)</Text>

<Text className="text-[14px]">Custom size</Text>
<Text className="text-[#FF6600]">Custom color</Text>
<Paragraph className="mt-[20px]">Custom margin</Paragraph>
<Paragraph className="bg-[#F5F5F5]">Custom background</Paragraph>
<Td className="p-[10pt]">Custom padding</Td>