# 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:

```js
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} />`):

```js
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.

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