Convert Tailwind classes to css inline style

Question

In these days i'm struggling with the conversion from a react app to a react-native app; in this react app i used tailwind to stylize components thus i need to convert tailwind classes to inline css so that i can convert it to react native stylesheet using a tool online. Is there a way or tool to get css from Tailwind code?

i.e. (Tailwind code) "w-full h-full bg-black" after conversion should be (vanilla css) { width : 100%; height : 100%; background-color : black;}

Thanks in advance!

Have you perhaps tried a package like this, which allows tailwind in RN: https://github.com/vadimdemedes/tailwind-rn ? — Mando, Jun 29 '21 at 15:04

score 2 · Accepted Answer · answered Jun 29 '21 at 17:45

The solution to this problem is : Tailwind-rn (as Mando replied)

Thanks to this packet it is possible to copy the entire tailwind code from react project and paste it as param of the function tailwind() which returns a react-native stylesheet object.

Here's the docs :

https://github.com/vadimdemedes/tailwind-rn

score 0 · Answer 2 · answered May 16 '22 at 14:16

0

This is a very specific scenario that has a very specific solution.

In a more general case (that you really want to extract the vanilla css of any HTML file using tailwindcss), there is a quick tutorial for that.

Extracting TailwindCSS from HTML

answered May 16 '22 at 14:16

mbastidasluis

39
1
7

Convert Tailwind classes to css inline style

2 Answers2