schickling / react-figma-tailwind

[WIP] React Figma Tailwind

react-figma-tailwind's Issues

Implement all freely available Tailwind UI components

• https://tailwindui.com/components?utm_source=tailwindcss&utm_medium=navigation
• Wrap components to Component

Try to use a custom Tailwind config

tailwind-rn Customization

Text styles propagating

Text styles from conatiners should be applied to nested text elements

<div className="px-4 py-12 mx-auto text-center max-w-7xl sm:px-6 lg:py-16 lg:px-8">
                <div className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    <div className="block">Ready to dive in?</div>
                    <div className="block">Start your free trial today.</div>
                </div>

"Ready to dive in?" and "Start your free trial today." should have a centering and bold.

Style prop should be applyed

<div style={{width: 360}} className="block" />

should be converted to

<ReactFigma.View style={[{
    width: 360
  }, tailwind("block")]} />

Align web and figma views

Images supporting

An example:

<img className="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80" alt="" />

Applying styles on compile time

Enable web defaults

• Flex should use flex-direction: row by default