Tailwind support/integration? about dripsy HOT 6 CLOSED

Yes actually. @axeldelafosse added a guide: https://axeldelafosse.com/blog/universal-design-system

We could add a tailwind section to the docs

from dripsy.

Interesting. I've seen a bit about tailwind but never used it personally.

I know the basic principles don't match up 1-1 to theme-ui, do you see the basic vales being used within the sx prop, a complete switch to a className based approach or working side by side somehow?

The theme-ui tailwind theme is also pretty interesting. https://theme-ui.com/packages/tailwind/

from dripsy.

I haven't found a strong integration idea here other than what theme UI does, so I think I'm going to close this for now, unless someone thinks there's a good way to integrate tailwind.

My conversation about it here: vadimdemedes/tailwind-rn#35

I think Tailwind UI looks amazing, but doesn't seem like there's a fit to use it at the moment, so the best bet is just to use their components as inspiration. Maybe down the line, once Dripsy's core features are all ready, we could spin off some actual opinionated UI component libraries.

from dripsy.

This library by @TVke looks interesting: https://github.com/TVke/react-native-tailwindcss

Just an idea, I wonder if we could use it like so:

import { t } from 'react-native-tailwindcss'

export default () => (
  <View tailwind={[t.mT2, { ...t.mT3, ...t.mB3 }]} />
)

(I don't think those are real style atoms, I just put them there for illustration.)

Where each item in the tailwind array represents the styles for that breakpoint, rather than using the md: syntax typically used by tailwind CSS.

Some people really like atomic design patterns, and since theme-ui already has a tailwind adapter, could be interesting.

from dripsy.

It seems like the only crossover might be in using the same theme for both interchangeably. I'm going to try tailwind out and see if there are other ways they could work together.

Also: https://github.com/dvkndn/typed.tw

from dripsy.

Any updates regarding this?

from dripsy.