Primary Brand Background
This box uses our custom 'brand-primary' color for its background and white text.
This box has a border using 'brand-accent'. The heading also uses 'brand-accent'.
Default Tailwind colors like 'bg-green-500' still work because we used
theme.extend.colors
.
The custom colors
brand-primary
,
brand-secondary
, and
brand-accent
are defined within a
<script>
tag in the
<head>
using
tailwind.config = { theme: { extend: { colors: { ... } } } }
.
This method is suitable for CDN usage. In a typical project with a build step, you would
define these in your
tailwind.config.js
file.