@tinypixelco/laravel-mix-tweemotional
v0.2.0
Published
Laravel mix extension that combines the best of Emotion and Tailwind.
Downloads
6
Maintainers
Readme
Tweemotional
Zero-config Laravel Mix extension that allows you to combine Tailwind utilities with Emotion styled components.
It's beautiful 😭
Installation
yarn add -D laravel-mix-tweemotional
Add
require('laravel-mix-tweemotional')
to yourwebpack.mix.js
config file. Once the extension is included you initialize it usingmix.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]',
})