🔥 Demo this example on CodeSandbox →
After creating your next app:
npm install --save twin.macro tailwindcss styled-components
Yarn instructions
yarn add twin.macro tailwindcss styled-components
// In .babelrc
{
"presets": [
"next/babel"
],
"plugins": [
"babel-plugin-macros",
[
"styled-components",
{ "ssr": true }
]
]
}
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.
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",
}
},
Twin comes with types for every import except the css
and styled
imports.
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.
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 |
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"
}
}
},
- See how to customize your classes →
- Learn how to use the styled-components library
The css prop / css import / styled import
- React
- Preact
- Create React App
- Gatsby
- Next.js (current))
- Snowpack