blossom-design v0.0.8

🔥 Demo this example on CodeSandbox →

Getting started

1. Install Create React App

npx create-react-app my-app

2. Install the dependencies

npm install --save twin.macro styled-components

yarn add twin.macro styled-components

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 src/App.js:

// src/App.js
import { GlobalStyles } from 'twin.macro'

const App = () => (
  <div>
    <GlobalStyles />
    {/* ... */}
  </div>
)

export default App

GlobalStyles also includes some @keyframes so the animate-xxx classes have animations. But if you’re not using the animate classes then you can avoid adding the extra keyframes.

4. Add the recommended config

Twin’s recommended 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: {
    config: 'tailwind.config.js',
    preset: 'styled-components',
    autoCssProp: true,
    debugProp: true,
    debugPlugins: false,
    debug: false
  }
}

b) Or in your package.json:

// package.json
"babelMacros": {
    "twin": {
      "config": "tailwind.config.js",
      "preset": "styled-components",
      "autoCssProp": true,
      "debugProp": true,
      "debugPlugins": false,
      "debug": false,
    }
},

5. Complete the TypeScript support (TypeScript only)

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

Add the remaining types →

Options

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
"babelMacros": {
  "twin": {
    "styled": {
      "import": "default",
      "from": "styled-components"
    },
    "css": {
      "import": "css",
      "from": "styled-components/macro"
    },
    "global": {
      "import": "createGlobalStyle",
      "from": "styled-components"
    }
  }
},

Note: Make sure you remove the preset option as that value disables these custom options.

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 (current)
• Gatsby
• Next.js
• Snowpack