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;
}