# Theme model to configure tailwindcss

**URL:** <https://forum.builder.io/t/theme-model-to-configure-tailwindcss/1391>\
**Category:** Technical Questions\
**Created:** [November 30, 2021, 2:29am UTC](https://forum.builder.io/t/theme-model-to-configure-tailwindcss/1391 "2021-11-30T02:29:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![swinner](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/swinner/32/863_2.png) [@swinner](https://forum.builder.io/u/swinner)\
**Post date:** [November 30, 2021, 2:29am UTC](https://forum.builder.io/t/theme-model-to-configure-tailwindcss/1391/1 "2021-11-30T02:29:04Z")

</div>

_Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank._

**Builder content link**

> **[Builder.io: Drag and drop page builder and CMS](https://builder.io/content/0975d9b66623d1e6648330e4529fe3912ed84a01abd16dae86ccb0ddb6233dc4)**
>
> Build and optimize digital experiences for any tech stack, visually.

**Builder public api key**  
86c411b0ae7d404c8cdfbc782a799149

**What are you trying to accomplish**  
Use the theme model to configure tailwindcss. Are there any example repos?  
The starter repo I used is using theme-ui. I’m not familiar with theme-ui and working under a time constraint so I’d like to stay with tailwind.

Is it possible to configure tailwind values like color palette using a theme model from builder?

**Code stack you are integrating Builder with**  
Nextjs, Swell

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [December 1, 2021, 12:46am UTC](https://forum.builder.io/t/theme-model-to-configure-tailwindcss/1391/2 "2021-12-01T00:46:16Z")

</div>

@swinner To make sure I understand correctly you are asking for changes within the theme in Builder to be written to the `tailwind.config.js` file within your app?

As far as I know we do not have any example repos doing that at the moment. I believe Swell actually has a repo with Builder that does utilize TailwindCSS, that is based off of our headless Shopify repo.

> **[GitHub - swellstores/nextjs-builder: The ultimate starter for headless Swell...](https://github.com/swellstores/nextjs-builder)**
>
> The ultimate starter for headless Swell stores. Contribute to swellstores/nextjs-builder development by creating an account on GitHub.

It should be possible to write to the tailwind.config file, but since the tailwind.config file does not support asynchronous calls with it, you would probably need to add a build script, something along the lines of the pseudocode written below:

```auto
const themeConfig = await builder.get('theme', { apiKey: YOUR_API_KEY_HERE} );
const writeFile = fs.openSync('tailwind.config.js', 'w'); 
fs.writeSync(writeFile, `model.exports= ${JSON.stringify(themeConfig)}`);

```

Try that out and let me know if that works!

---

<div class="post-metadata">

**Author:** ![swinner](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/swinner/32/863_2.png) [@swinner](https://forum.builder.io/u/swinner)\
**Post date:** [December 1, 2021, 5:11pm UTC](https://forum.builder.io/t/theme-model-to-configure-tailwindcss/1391/3 "2021-12-01T17:11:05Z")

</div>

I think I’m just going to go with a code defined theme for now. Maybe will circle back on this when I have time.

I’m using the swell repo as a starter. It seems like they started with tailwind but moved to theme-ui. Maybe theme-ui is easier to work with builder models that control it. I’m not sure yet. Their pattern is to get the theme from builder in `getStaticProps` and pass to the `ThemeProvider`.

If I did want to try having a builder model to configure tailwind config, I think I’d need to make the theme model in builder align with the format tailwind.config expects. I’m using the swell starter which came with a predefined theme builder model.