Add completions for Tailwind CSS in CSS-in-JS libraries

[ristomcintosh]

The babel-plugin-tailwind-components allows for Tailwind class names to be used in CSS-in-JS libraries

I added the regexs in "Javascript based extensions".

styled-components

import styled from 'styled-components'
import tw from 'tailwind.macro'

const Button = styled('button')`
  ${tw`font-mono text-sm text-red hover:text-blue`};
`

emotion

import styled from 'preact-emotion'
import { css } from 'emotion'
import tw from 'tailwind.macro'

const green = css(tw`text-green`)

const Button = styled('button')`
  ${tw`font-mono text-sm text-red hover:text-blue`};
`

const App = () => (
  <Button className={green} css={tw`uppercase`}>
    hello, world
  </Button>
)

Note: the css prop requires the use of babel-plugin-emotion

glamor

import { css } from 'glamor'
import tw from 'tailwind.macro'

const style = css(tw`font-mono text-sm text-red hover:text-blue`)

const App = () => <div {...style}>hello, world</div>