Improve readibility of tailwindcss classes

[behnammodi]

tailwindcss is a super powerful tool for creating UI on the web. but in big projects, it looks like a mess.

I recently started to create something to reduce this messiness:

https://www.npmjs.com/package/tailwindy-components

The idea is we can have a readable structure like what we see on styled-components

So rather than write something like this:

<div class="container mx-auto">
...
</div>

We can have something like this:

const Container = tailwindy.div`
  container
  mx-auto
`;

<Container>
...
</Container>

This is an idea and you can see an example on Codesanbox:
https://codesandbox.io/s/tailwindy-example-1-ezzokr

The big issue is how can we integrate tailwindy-components with
other parts of tailwindcss such as tailwindcss-intellisense