NextJS + Strapi - Custom layout and dynamic values

[danestves]

As anyone in the industry of making a lot of websites for clients sometimes the clients wants to use alternatives like:

• https://github.com/emotion-js/emotion
• https://github.com/styled-components/styled-components

But this packages has a high bundle size, with twind the thing is different. We always use Tailwind for all of our projects but sometimes the clients want a custom fontSize, color, etc that comes from Strapi (it's our backend by default) and now in one of our biggest project we are changing from emotion-js to use twind for all the application

Here is a difference of what is looks like one of the components with styled vs twind

And in the browser it's even more magical the way that is working 😍 we are waiting for the official release of the dynamic styles features to pass all the application to use only twind and leverage bundle size and also improve the development time

[danielweck]

Great :)

Tip: I was using clsx too (super little package!) ... but now I use tw for all my needs, so I removed the clsx dependency from my project. The tw function is very versatile.

[lukejacksonn]

This is awesome to see man! Congrats 🥳 we have also transitioned from Tailwind to Twind for a client recently so that we can accommodate composition more readily (using apply and twind/style).

One thing I notice here (maybe you have already figured this out) is that Twind has clsx style combinatory logic built in too. So for example:

// Template literals
tw`bg-gray-200 rounded`
//=> bg-gray-200 rounded
tw`bg-gray-200 ${false && 'rounded'}`
//=> bg-gray-200

// Strings
tw('bg-gray-200', true && 'rounded', 'underline')
//=> bg-gray-200 rounded underline

// Object syntax
tw({ 'bg-gray-200': true, rounded: false, underline: isTrue() })
//=> bg-gray-200 underline
tw({ 'bg-gray-200': true }, { rounded: false }, null, { underline: true })
//=> bg-gray-200 underline
tw({ hover: ['bg-red-500', 'p-3'] }, 'm-1')
// => hover:bg-red-500 hover:p-3 m-1

// Arrays
tw(['bg-gray-200', 0, false, 'rounded'])
//=> bg-gray-200 rounded
tw(['bg-gray-200'], ['', 0, false, 'rounded'], [['underline']])
//=> bg-gray-200 rounded underline

// Variadic
tw('bg-gray-200', [
  1 && 'rounded',
  { underline: false, 'text-black': null },
  ['text-lg', ['shadow-lg']],
])
//=> bg-gray-200 rounded text-lg shadow-lg

Taken from the docs here https://twind.dev/docs/modules/twind.html#tw-function

[danestves]

OMG let me try it!

[danestves]

@sastan maybe i'm missing something?

[danestves]

@sastan as i see is happening on setup too

[sastan]

I don't know. There must be some other problem. See this example: https://codesandbox.io/s/twind-nextjs-forked-0qjdh?file=/pages/index.js

[danestves]

layer 8 error sorry

[danestves]

@sastan here is the site on production with twind https://seeed.us/ 🎉