# Adding CSS to components

**URL:** <https://forums.realmacsoftware.com/t/adding-css-to-components/46376>\
**Category:** Elements\
**Created:** [February 21, 2025, 1:16am UTC](https://forums.realmacsoftware.com/t/adding-css-to-components/46376 "2025-02-21T01:16:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![iamliving](https://avatars.discourse-cdn.com/v4/letter/i/eb9ed0/32.png) [@iamliving](https://forums.realmacsoftware.com/u/iamliving)\
**Post date:** [February 21, 2025, 1:16am UTC](https://forums.realmacsoftware.com/t/adding-css-to-components/46376/1 "2025-02-21T01:16:23Z")

</div>

Is it possible to add CSS to Element components?

If so, how do I add a class to a component like test or typography?

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [February 21, 2025, 2:24am UTC](https://forums.realmacsoftware.com/t/adding-css-to-components/46376/2 "2025-02-21T02:24:18Z")

</div>

> [@iamliving](#):
>
> If so, how do I add a class to a component like test or typography?

There is an Advanced settings section in the inspector where you can enter classes.

 ![CleanShot 2025-02-20 at 16.23.05@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/2/022d617c8d18388e015acd04ddb07b3c8abf8950.png)

This is also visible in the inline text editor when you have some text selected. I use this all the time to handle superscripts for some text.

---

<div class="post-metadata">

**Author:** ![rud](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/rud/32/24853_2.png) [@rud](https://forums.realmacsoftware.com/u/rud)\
**Post date:** [April 20, 2025, 3:41pm UTC](https://forums.realmacsoftware.com/t/adding-css-to-components/46376/3 "2025-04-20T15:41:01Z")

</div>

as a beginner i don’t understand, an example would help, where is the css and how is it accessed?

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [April 22, 2025, 7:59am UTC](https://forums.realmacsoftware.com/t/adding-css-to-components/46376/4 "2025-04-22T07:59:27Z")

</div>

Our advice is to use [Tailwind](https://tailwindcss.com) in all cases — Elements is built upon Tailwind and allows you to enter any of the utility classes it provides. In 99.9% of cases you will be able to use tailwind for any custom styling you need.

In the case where you absolutely need to write custom CSS, then you can add classes using the Advanced→CSS Classes input found on all built-in components.

 ![CleanShot 2025-04-22 at 09.57.38@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/1/31b802538967a361e6e806861c8a1879256fa483.jpeg)

You can add your custom classes in a couple of different places:

1. Globally via the Project Template
2. Per page via the Page Extra Code

 ![CleanShot 2025-04-22 at 09.50.00@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/f/4f08c69cfeac930df7c9789c0a866006224a3ee4.jpeg)  
 ![CleanShot 2025-04-22 at 09.53.05@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/c/7c02e1bbf09923ecbabd56ce034071069b7efe7d.jpeg)

---

<div class="post-metadata">

**Author:** ![rud](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/rud/32/24853_2.png) [@rud](https://forums.realmacsoftware.com/u/rud)\
**Post date:** [April 25, 2025, 7:27pm UTC](https://forums.realmacsoftware.com/t/adding-css-to-components/46376/5 "2025-04-25T19:27:49Z")

</div>

Ben  
thank you, now i understand better 👍