Components Modifying components

One-off modifications

Most components will allow you to provide a `class` attribute. If you wish to override an existing class you can prepend an exclamation mark to the class:

HEEX 
          <.h2 class="leading-1">Might not work</.h2>
<.h2 class="!leading-1">Works!</.h2>

Global modifications

Every CSS class is located in the CSS file you pull into your `app.css`. Here is the file on Github.

What you can do, is find the classes you want to override, and put them in your `app.css` file.

app.css 
          @import "tailwindcss/base";
@import "../../deps/petal_components/assets/default.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

.pc-button {
  @apply inline-flex items-center justify-center font-semibold tracking-wider uppercase transition duration-150 ease-in-out border-2 rounded-none focus:outline-none;
}
.pc-button--primary {
  @apply text-black border-black bg-primary-400 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;
}