# Bring your own CSS
Clerk supports multiple ways to bring your own CSS and styles to its prebuilt components. You can either style using the `appearance.elements` prop, or target Clerk's stable CSS classes directly in your stylesheet.
## Apply the simple theme
In some cases, customizing the default theme of Clerk's components may require complex overrides to achieve your desired styles. To simplify the process, Clerk offers a `simple` theme that removes advanced styling and provides a clean starting point for further customization. To use the `simple` theme, apply it using the `appearance.theme` prop.
```tsx
```
## Finding the elements to style
If you want full control over the appearance of a Clerk component, you can target the underlying elements by using their CSS classes and then apply your own styles.
First, you need to identify the underlying element of the Clerk component you want to style. You can do this by **inspecting** the HTML of the component.
For example, if you want to style the primary button in a Clerk component, you can right-click on the primary button and select "Inspect" from the menu. This will open the browser's developer tools and highlight the element in the HTML, as shown in the following image:
When you select an element that is part of a Clerk component, you'll notice a list of classes like so:
```html
cl-formButtonPrimary cl-button 🔒️ cl-internal-1ta0xpz
```
Any of the classes listed before the lock icon (🔒️) are safe to rely on, such as `cl-formButtonPrimary` or `cl-button` from the previous example. You'll use these classes to target elements of the Clerk component.
> Anything after the lock icon (🔒️) are internal classes used for Clerk's internal styling and should not be modified.
Once you have identified the classes of the element you want to target, you can apply your custom styles in your existing stylesheet, or via the `appearance.elements` prop.
## Use a stylesheet
You can style the elements of a Clerk component with CSS in your existing stylesheet.
For this example, say you want to style the primary button in a Clerk component. You inspect the primary button to find the classes that you can use to target the element:
```html
cl-formButtonPrimary cl-button 🔒️ cl-internal-1ta0xpz
```
You can then create a CSS file, use the classes you identified to target the primary button, and apply your custom styles. In this case, `cl-formButtonPrimary` is the class you want to use because it's specific to the primary button:
filename: styles/global.css
```css
.cl-formButtonPrimary {
font-size: 14px;
text-transform: none;
background-color: #611bbd;
}
.cl-formButtonPrimary:hover,
.cl-formButtonPrimary:focus,
.cl-formButtonPrimary:active {
background-color: #49247a;
}
```
## Use custom CSS classes
You can pass additional classes to Clerk component elements by using the `elements` property on the `appearance` prop.
For example, an element in a Clerk component will have classes that look something like this:
```html
cl-formButtonPrimary cl-button 🔒️ cl-internal-1ta0xpz
```
Remove the `cl-` prefix from a class and use it as the key for a new object in the `elements` property. The value of this object should be the string of classes you want to apply to the element.
The following example shows how to style the primary button in a `` component with custom CSS classes:
```tsx
```
## Use Tailwind
To use Tailwind CSS v4, you must set the `cssLayerName` property to ensure that Tailwind's utility styles are applied after Clerk's styles.
It's recommended to add this to the [](https://clerk.com/docs/nextjs/reference/components/clerk-provider.md) that wraps your app so that it's applied to all Clerk components, as shown in the following example. The example names the layer `clerk` but you can name it anything you want.
Use the following tabs to view the code necessary for each file.
**layout.tsx**
```tsx
{/* ... */}
```
**global.css**
```css
@layer theme, base, clerk, components, utilities;
@import 'tailwindcss';
```
Then, you can use Tailwind's classes to style the elements of the Clerk component. The following example shows how to use Tailwind classes to style the primary button in a `` component:
```tsx
```
#### Use CSS modules to style Clerk components
CSS modules are a great way to scope your CSS to a specific component.
Create your module file and add the CSS you want to apply, as shown in the following example for the `` component:
filename: styles/SignIn.module.css
```css
.primaryColor {
background-color: bisque;
color: black;
}
```
Then you can apply this by importing the file and using the classes whenever required:
```tsx
import styles from '../styles/SignIn.module.css'
export default function CustomSignIn() {
return (
)
}
```
## Use inline CSS objects
You can style the elements of a Clerk component with inline CSS objects.
The following example shows how to style the primary button in a `` component with an inline CSS object:
```tsx
```
---
## Sitemap
[Overview of all docs pages](https://clerk.com/docs/llms.txt)