Customizing Tailwind

Here are some links that help me figure this stuff out:

1. (Nate Stephens)[https://www.natestephens.dev/create-your-own-custom-classes]

Create your own color theme

Go to this site and choose a theme and then press the Export button.

It will generate code that looks something like this:

'ultramarine': {
    '50': '#f1f2ff',
    '100': '#e6e7ff',
    '200': '#d0d3ff',
    '300': '#abadff',
    '400': '#7d7bff',
    '500': '#5446ff',
    '600': '#3c21ff',
    '700': '#2d0ff2',
    '800': '#250ccb',
    '900': '#210ca6',
    '950': '#0e0471',
},

Note that the name of my theme is ultramarine, but yours may be different.

Update the tailwind.config.js file like so:

1. Add a property named extend to the theme object.
2. Set the value of the extend property to an object that has a colors property.
3. Set the value of the colors property to an empty object.
4. Paste the code you generated above into the colors object

The tailwind.config.js file should now look something like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./public/*.html","./src/**/*.{html,js}"],
  presets: [],
  darkMode: 'media', // or 'class'
  theme: {
    extend:{
      colors: {
        'ultramarine': {
          '50': '#f1f2ff',
          '100': '#e6e7ff',
          '200': '#d0d3ff',
          '300': '#abadff',
          '400': '#7d7bff',
          '500': '#5446ff',
          '600': '#3c21ff',
          '700': '#2d0ff2',
          '800': '#250ccb',
          '900': '#210ca6',
          '950': '#0e0471',
        },
      }
    },
    // THE REST OF THE CONFIG FILE WILL BE HERE

Now make use of the theme in a web page by adding something like this:

<h1 class="text-ultramarine-900">Hello World!</h1>

Finally, compile your code by running the tailwind build command, and launch the index.html page in your browser.

Applying Tailwind classes in your .css file

Here's a great way to style your elements, just add a 'base' layer to the .css file that gets compiled when you run the Tailwind build command:

@layer base {
  h1 {
    @apply text-white;
  }
}

After compiling the code, and running the page in the browser, you should see that all H1 elements are using Tailwind's 'text-white' class.

Create your own components

Add this code to your .css file (the one that you compile by running the tailwind build command)

@layer components {
    /* This won't be included in your compiled CSS unless you actually use it */
    .btn {
        @apply text-white;
        @apply bg-black;
        @apply rounded;
        @apply p-2;
        @apply border-solid border-2 border-white;
    }
}

Now in your web page, you can make use of the component like so:

<button class="btn">This is a button component</button>

To create other components, just add another ruleset inside the 'components' curly braces.