Convert tailwindcss classes to vanilla css

user_1285492 0
Viewed 1603

is there any lib that can take a dom element and return a string with vanilla css, to use inside a webproject?

const styles = TailwindToStyles('<div class="bg-teal-100 m-10">Lorem ipsum</div> ')

result of styles is

.bg-teall-100 {
  background-color: #e6fffa;
}
.m-10{
  margin: 40px
}

gregor

tailwind-css
2 Answers

I was looking for a similar tool that can convert the tailwind class to CSS. I ran into one Reddit Thread. There are various tools listed out there.

The one that is simpler and closer to what I was looking for is this app to convert the tailwind class to CSS.

Here is the GitHub link: https://github.com/Devzstudio/tailwind_to_css
Live demo: https://tailwind-to-css.vercel.app/

FOR REACT NATIVE

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

Here's the doc : https://github.com/vadimdemedes/tailwind-rn

user_78745320

I had a similar problem and solved it by

  • firstly create an Iframe
  • mount the tailwind CDN and then insert the html string to the body
  • extract the generated styles from the head and use.

I released a npm package that does this, check it out here https://www.npmjs.com/package/tailwind-to-css

user_133260860
Related