Hi all,
TL;DR: I've just released a new Tailwind plugin called tailwindcss-logical, which adds utilities for CSS Logical Properties and Values, and I'm interested in any and all feedback:
GitHub: https://github.com/stevecochrane/tailwindcss-logical
NPM: https://www.npmjs.com/package/tailwindcss-logical
(Very rudimentary) demo page: https://stevecochrane.github.io/tailwindcss-logical/
I'm making a website for my wife, who is from Iran, and I want to support both English and Farsi (a right-to-left language) on the site, so CSS Logical Properties and Values seems like the right tool for the job. I also want to use Tailwind because Tailwind is amazing, so I've made this plugin. I've seen several issues filed here as well as on the main project requesting RTL support so hopefully others find this useful as well.
My approach for it is as follows:
- Only include properties and values from the specification, for clarity of purpose.
- Include even the properties that don't yet have great browser support, because that can be solved with PostCSS.
- Don't include things that don't have non-logical equivalents already in Tailwind. (In short, some border utilities and the
caption-side values. More on this in the README.)
I'm curious what level of configuration people expect from such a plugin. For example, personally I don't bother with selectively enabling and disabling certain sets of utilities because I can run PurgeCSS and remove anything I'm not using automatically. So I haven't bothered with allowing certain utilities to be toggled on or off, but if that's a common enough use case, I could add it.
I also want to say many thanks to the Tailwind team, not just for the Tailwind itself but also for putting in the effort to make it so easy and straightforward to create plugins for it.
Thanks!
Steve
Hi all,
TL;DR: I've just released a new Tailwind plugin called tailwindcss-logical, which adds utilities for CSS Logical Properties and Values, and I'm interested in any and all feedback:
GitHub: https://github.com/stevecochrane/tailwindcss-logical
NPM: https://www.npmjs.com/package/tailwindcss-logical
(Very rudimentary) demo page: https://stevecochrane.github.io/tailwindcss-logical/
I'm making a website for my wife, who is from Iran, and I want to support both English and Farsi (a right-to-left language) on the site, so CSS Logical Properties and Values seems like the right tool for the job. I also want to use Tailwind because Tailwind is amazing, so I've made this plugin. I've seen several issues filed here as well as on the main project requesting RTL support so hopefully others find this useful as well.
My approach for it is as follows:
caption-sidevalues. More on this in the README.)I'm curious what level of configuration people expect from such a plugin. For example, personally I don't bother with selectively enabling and disabling certain sets of utilities because I can run PurgeCSS and remove anything I'm not using automatically. So I haven't bothered with allowing certain utilities to be toggled on or off, but if that's a common enough use case, I could add it.
I also want to say many thanks to the Tailwind team, not just for the Tailwind itself but also for putting in the effort to make it so easy and straightforward to create plugins for it.
Thanks!
Steve