# Use Tailwind for Component Styling

**URL:** <https://forums.realmacsoftware.com/t/use-tailwind-for-component-styling/44934>\
**Category:** Elements API\
**Created:** [October 11, 2024, 10:17am UTC](https://forums.realmacsoftware.com/t/use-tailwind-for-component-styling/44934 "2024-10-11T10:17:48Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 11, 2024, 10:17am UTC](https://forums.realmacsoftware.com/t/use-tailwind-for-component-styling/44934/1 "2024-10-11T10:17:49Z")

</div>

Elements is based on [Tailwind CSS](https://tailwindcss.com), so obviously we use Tailwind for all our components, and highly recommend developers building for Elements do the same.

If everyone is using Tailwind we can **ensure consistency across all components** , making it easier for end users to build sites that are consistent and easy to update. It makes collaboration smoother, as everyone follows the same styling method.

It also means **ALL Components will just work with the users Themes**. Here’s an example of this in action (see gif below). You’ll notice how fonts, colours, spacing, and more all change based on the theme.

![CleanShot 2024-10-11 at 10 .45.49](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/b/5b5ee5b04fe91b88aa6381061611c0f8e1c1e210.gif)

If you’re just getting started writing custom components, it’s worth reading the [component styling guide we’ve put together](https://docs.realmacsoftware.com/elements-docs/elements-language/api-introduction/component-styling) as it explains why it’s so important to stick to using Tailwind classes.

If you have any questions or need help, please ask!

> **[Component Styling | RapidWeaver Elements Docs](https://docs.realmacsoftware.com/elements-docs/elements-language/api-introduction/component-styling)**
>
> A standardized approach