Skip to content

Releases: bradlc/babel-plugin-tailwind-components

v1.0.0-alpha.2

03 Apr 23:07
Compare
Choose a tag to compare
v1.0.0-alpha.2 Pre-release
Pre-release

Install:

npm install --save-dev tailwind.macro@next
  • Adds support for Tailwind v1 🎉
    • The default config path is now ./tailwind.config.js
    • Your config is merged with the defaults just like actual Tailwind.
    • In this initial release Tailwind v0 is not supported.
  • Having a config file is no longer a requirement. The plugin will use the default Tailwind config if you don't have your own.
  • Removes the format option and the ability to output styles as a string. Objects only now. Note that styled-components does support style objects.
  • Adds support for advanced Tailwind screens (#21)
  • Fixes rounded class names (#16)
  • Adds new styled API 💅 this is in addition to the existing object API, which is unchanged:
import tw from 'tailwind.macro'

let Box = tw.div`bg-red text-white`
let App = () => <Box />
  • You can configure which library to use using the new styled option in your babel-plugin-macros config. The default is @emotion/styled:
module.exports = {
  tailwind: {
    styled: '@emotion/styled'
  }
}

If it's a named export:

module.exports = {
  tailwind: {
    styled: {
      import: 'myStyled',
      from: 'my-styled-library'
    }
  }
}