lopezjurip / twin.macro-nextjs-styled-ts-error

Reproduction of error when using twin.macro + Next.js + Typescript + Styled-components

🔥 Demo this example on CodeSandbox →

Getting started

1. Install the dependencies

After creating your next app:

npm install --save twin.macro tailwindcss styled-components

Yarn instructions

yarn add twin.macro tailwindcss styled-components

2. Enable babel macros and configure styled-components

// In .babelrc
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "babel-plugin-macros",
    [
      "styled-components",
      { "ssr": true }
    ]
  ]
}

3. Add the global styles

Projects using Twin also use the Tailwind preflight base styles to smooth over cross-browser inconsistencies.

Twin adds the preflight base styles with the GlobalStyles import which you can add in pages/_app.js:

// page/_app.js
import { GlobalStyles } from 'twin.macro'

const App = ({ Component, pageProps }) => (
  <div>
    <GlobalStyles />
    <Component {...pageProps} />
  </div>
)

export default App

GlobalStyles also includes some @keyframes so the animate-xxx classes have animations and some global css that makes the ring classes work.

4. Add the twin config

Twin’s config can get added in a couple of different places.

a) In a new file named babel-plugin-macros.config.js placed in your project root:

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    preset: 'styled-components'
  }
}

b) Or in your package.json:

// package.json
"babelMacros": {
  "twin": {
    "preset": "styled-components",
  }
},

5. Complete the TypeScript support (TypeScript only)

Twin comes with types for every import except the css and styled imports.

Add the remaining types →

6. Add the server stylesheet (optional)

To avoid the ugly Flash Of Unstyled Content (FOUC), add a server stylesheet in pages/_document.js that gets read by Next.js:

// pages/_document.js
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />)
        })
      const initialProps = await Document.getInitialProps(ctx)

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      }
    } finally {
      sheet.seal()
    }
  }
}

Note: Adding styles within this file won’t work like you would expect, take a look at this issue for a workaround.

Twin config options

Name	Type	Default	Description
config	string	"tailwind.config.js"	The path to your Tailwind config
preset	string	"emotion"	The css-in-js library behind the scenes - also supports 'styled-components' and 'goober'
hasSuggestions	boolean	true	Display class suggestions when a class isn't found
dataTwProp	boolean	true	Add a prop to your elements in development so you can see the original tailwind classes, eg: <div data-tw="bg-black" />
debugPlugins	boolean	false	Display generated class information in your terminal from your plugins
debug	boolean	false	Display information in your terminal about the Tailwind class conversions
disableColorVariables	boolean	false	Disable css variables in colors (not gradients) to help support IE11/react native

Customized imports

Instead of using preset: "styled-components", you can also customize the styled, css and GlobalStyles imports with the following config:

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    styled: {
      import: 'default',
      from: 'styled-components'
    },
    css: {
      import: 'css',
      from: 'styled-components/macro'
    },
    global: {
      import: 'createGlobalStyle',
      from: 'styled-components'
    }
  }
}

package.json instructions

// package.json
"babelMacros": {
  "twin": {
    "styled": {
      "import": "default",
      "from": "styled-components"
    },
    "css": {
      "import": "css",
      "from": "styled-components/macro"
    },
    "global": {
      "import": "createGlobalStyle",
      "from": "styled-components"
    }
  }
},

Next steps

• See how to customize your classes →
• Learn how to use the styled-components library
  The css prop / css import / styled import

More examples with styled-components

• React
• Preact
• Create React App
• Gatsby
• Next.js (current))
• Snowpack