Extending Tailwind preflight

[therealgilles]

What is the equivalent with GlobalStyles of the following?

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  a {
    @apply text-blue-600 underline;
  }
}

@tailwind components;

@tailwind utilities;

[ben-rogerson]

Something like this you can spread into your global styles (I like using object syntax):

import tw from 'twin.macro'

const baseStyles = {
  h1: tw`text-2xl`,
  // ...
  a: tw`text-blue-600 underline`,
}

[ben-rogerson]

The alternative is to move it to a tailwind plugin:

const plugin = require("tailwindcss/plugin");

module.exports = {
  plugins: [
    plugin(function ({ addBase, theme }) {
      addBase({
        h1: { fontSize: theme("fontSize.2xl") },
        // ...
        a: { color: theme("colors.blue.600"), textDecoration: 'underline' },
      });
    }),
  ],
};

This option means you'll be writing more vanilla css.

[therealgilles]

Thank you for the quick replies!

[therealgilles]

Without the css(...) part, it works on page load. But as soon as I do an update, the ordering of styles is wrong on hot module replacement. What am I doing wrong?

[ben-rogerson]

Emotion has trouble keeping multiple global style sets in order when added in the same spot - but we can combine them as a workaround:

import { css, Global } from '@emotion/react'
import tw, { globalStyles } from 'twin.macro'

const customStyles = css([
  globalStyles,
  { // < Separate object to avoid merge issues
    body: tw`font-sans antialiased bg-red-500`,
    h1: tw`text-2xl font-semibold`,
  },
])

const GlobalStyles = () => <Global styles={customStyles} />

export default GlobalStyles

[therealgilles]

Interesting. It works but TypeScript is not happy:

(alias) const globalStyles: Record<string, unknown>
import globalStyles
No overload matches this call.
  Overload 2 of 2, '(...args: CSSInterpolation[]): SerializedStyles', gave the following error.
    Type 'Record<string, unknown>' is not assignable to type 'CSSInterpolation'.
      Type 'Record<string, unknown>' is not assignable to type 'Keyframes'.
        Type 'Record<string, unknown>' is missing the following properties from type '{ name: string; styles: string; anim: number; toString: () => string; }': name, styles, animts(2769)

[therealgilles]

This seems to do the trick:

mport { css, Global } from '@emotion/react'
import tw, { globalStyles, TwStyle } from 'twin.macro'

const styles = css([
  globalStyles as TwStyle,
  {
    body: tw`font-sans antialiased`,
    h1: tw`text-3xl font-semibold`,
  },
])

const GlobalStyles = () => <Global styles={styles} />

export default GlobalStyles

[ben-rogerson]

Nice one 👍

Looks like twins globalStyle types need that workaround for this use case - something I'll patch up.

[therealgilles]

Here is what seems to work for hot module replacement:

// GlobalStyles.tsx
import React from 'react' // if you need it
import { Global } from '@emotion/react'
import tw from 'twin.macro'

const customStyles = {
  body: tw`font-sans antialiased`,
  h1: tw`text-2xl font-semibold`,
}

const GlobalStyles = () => <Global styles={customStyles} />

export default GlobalStyles

then in Layout.tsx:

import tw, { GlobalStyles as BaseStyles } from 'twin.macro'
import GlobalStyles from '../styles/GlobalStyles'
   ...
   <>
      <BaseStyles />
      <GlobalStyles />
      ...
      <Header />
      <Main />
      <Footer />
   </>

Not sure why this works and not the two together.

[therealgilles]

Here is my final solution to keep all the styles in order on hot module replacement:

import { css, Global } from '@emotion/react'
import tw, { globalStyles as baseStyles, TwStyle } from 'twin.macro'

const styles = css([
  baseStyles as TwStyle,
  {
    html: tw`scroll-smooth`,
    body: tw`font-sans antialiased`,
    ...
  },
])

const GlobalStyles = () => <Global styles={styles} />

export default GlobalStyles

[ben-rogerson]

Nice one - I think I'll update the twin examples repos with this example