Tweemotional

Zero-config Laravel Mix extension that allows you to combine Tailwind utilities with Emotion styled components.

It's beautiful 😭

Installation

1. yarn add -D laravel-mix-tweemotional

2. Add require('laravel-mix-tweemotional') to your webpack.mix.js config file. Once the extension is included you initialize it using mix.tweemotional().

Basic usage

Creating a <Backsplash /> styled component using Tailwind classes generated by your tailwind.config.js file:

import tw from 'tailwind.macro'

const Backsplash = tw.div`bg-black w-full`

Creating a styled component that takes a combination of preset Tailwind utilities and props (example: <Backsplash color={hotpink} />):

import tw from 'tailwind.macro'

const Backsplash = styled.div(
  tw`relative w-100 h-100`,
  props => ({
    backgroundColor: `${props.color ? props.color : null}`,
  })
)

Options

Tweemotional takes two configuration paramters which are passed when initializing the extension: tailwindConfig allows you to specify the path to your tailwind.config.js file (if it is in a non-standard location, for example). emotionFormat allows you to specify formatting instructions for Emotion generated classnames.

mix.tweemotional({
  tailwindConfig: 'non/standard/tailwind.config.js',
  emotionFormat: '[local]',
})