Theme model to configure tailwindcss

Technical Questions
1

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

2

@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.

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:

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!

3

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.

1 Like