I'm a professional PHP, Python and Javascript developer from the UK. I've worked with Django, Laravel, and React, among others. I also maintain a legacy Zend 1 application.
I've used it a couple of times on Gatsby sites recently, as well as a React-based admin.
The nature of Tailwind means the idea of having a React-specific implementation like Bootstrap has react-bootstrap simply doesn't make sense - it's based around utility classes that map fairly closely to individual CSS rules.
It should be easy enough to integrate into most stacks - I have used it with Laravel Mix and Gatsby, and integrating it with create-react-app should be straightforward too as it's just a PostCSS plugin.
I'm a professional PHP, Python and Javascript developer from the UK. I've worked with Django, Laravel, and React, among others. I also maintain a legacy Zend 1 application.
Basically, most of the classes only apply one CSS rule.
For instance, you apply padding of 1rem by adding the class p-4, and that's all that class does. Adding margin-x of auto is mx-auto. Applying a dark green background can be done with bg-green-900.
It's possible to amend the size and colour presets if you need more or different colours and sizes.
It sounds weird, but it works surprisingly well for prototyping. Later on it's easy to extract the styles for easier reuse. I also find it fits well with component-based UI libraries like React or Vue, and there's less tendency for the end results to look same-y like many sites that use Bootstrap.
I've used it a couple of times on Gatsby sites recently, as well as a React-based admin.
The nature of Tailwind means the idea of having a React-specific implementation like Bootstrap has react-bootstrap simply doesn't make sense - it's based around utility classes that map fairly closely to individual CSS rules.
It should be easy enough to integrate into most stacks - I have used it with Laravel Mix and Gatsby, and integrating it with create-react-app should be straightforward too as it's just a PostCSS plugin.
Thanks Matthew for really elaborating. If I pick Tailwind up it will be in large part cuz of u
What does it mean by "utility classes"? (background: I've never used tailwind).
How does it differ from Bootstrap?
Basically, most of the classes only apply one CSS rule.
For instance, you apply padding of 1rem by adding the class
p-4, and that's all that class does. Adding margin-x of auto ismx-auto. Applying a dark green background can be done withbg-green-900.It's possible to amend the size and colour presets if you need more or different colours and sizes.
It sounds weird, but it works surprisingly well for prototyping. Later on it's easy to extract the styles for easier reuse. I also find it fits well with component-based UI libraries like React or Vue, and there's less tendency for the end results to look same-y like many sites that use Bootstrap.
Thank you, Matthew.
I got the gist and seems pretty useful.