Twin.macro: npm bump please

[corysimmons]

Hey Ben, Thanks for all your work on this lately. Really love it. Would you mind doing a version bump on npm? I was patching that container commit into it, but I'm having problems with the production build step. 😅

[ben-rogerson]

No worries - Done!

I managed to squeeze in the new container updates from Tailwind in 1.0.0-alpha.10 too.

[ben-rogerson]

I removed my new container-auto class, but added support for container margins and independent left/right sizing.

[corysimmons]

Nice! Thank you! I'm new to Tailwind but https://tailwindcss.com/docs/container/#horizontal-padding looks like the standard way to tweak container. Is that what you're doing?

[ben-rogerson]

No worries at all!

Yeah, that's one of the features Tailwind just released so it's been added to Twin now too.

But in addition to that padding, you can also add margins to the container at different screen sizes:

theme: {
    container: {
      padding: {
        default: '1rem',
        sm: '2rem',
        md: '3rem',
        lg: '4rem',
        xl: '6rem',
      },
      margin: {
        default: 'auto',
        lg: ['auto', '0'],
      },
},

If you specify container: { center: true }} then the margins won't render and it'll center your container like normal.

[corysimmons]

Very cool! Thanks for all your help Ben! Really enjoying using twin with this pattern:

const Foo = () => (
  <div css={css`
    ${tw`...`}
    /* any specific css stuff/selectors tailwind doesn't get ... */
  `}>
  </div>
)

[ben-rogerson]

No worries Cory.

Have you also seen the array pattern? I like using it when there are either lots of conditionals or even just to remove the need for extra ${}'s:

<div
  css={[
    true && tw`bg-red-500`,
    css`
      &:hover {
        background: black;
      }
    `
  ]}
>

[corysimmons]

Yup, I'm using that pattern when I need to do a conditional (like you demonstrate).

btw, made with twin.macro: https://corysimmons.com :D

[ben-rogerson]

Nice one, I think your site looks great. Using GitHub issues as posts is a fun idea I haven't seen before :) And I remember using LostGrid a long time ago, it was pretty neat.

[adrianjacob]

Nice work :)

I dont think adding

corePlugins: { container: false },
Disables it as per tailwind docs?

[ben-rogerson]

Cheers!
Those corePlugin settings really are so Tailwind doesn't generate certain styles upfront.
But Twin only generates css as its used so there's no real need for it :)