tailwind provides a lot of css properties by default like box shadows, gradients and all.
just as an example, think that you want to make your div have a gray background, rounded corners, has a width and height of 50% of screen, should be flex, and also has a box shadow.
in vanilla css, you would make a separate css file, and do something like:
maybe you can figure it out now why I'm hooked on to tailwind, but again it totally depends on the developer, there are developers who prefer vanilla CSS and can do it in the same amount of time I take to implement things on tailwind :)
Tailwind isn’t a replacement for vanilla CSS, it’s merely a tool to assist in applying css. Tailwind’s biggest advantage is the easy-to-apply built-in design system and shorthands for more complicated css values.
There can be no “this is better” because that’s a stupid argument to make. It’s like saying “JavaScript is better than Typescript”. Typescript merely makes life easier for devs but it’s still coming out to JavaScript.
I don't think there are plugins, you just install tailwind on your app and use class names to style the component. For installation and initialization in react you may see this, and personally, I learnt tailwind just by reading docs, the docs are easy to read, if you are ever confused about a css property and how to write it, just go over to docs and search the property. After making a few projects using tailwind, you will eventually start remembering the class names.
of course i had to reply to the wrong comment, is still can't grasp how this site works lol
1 can't agree. Do you also feel the need to not separate your .js files and write your scripts inlined? I bet you don't. Then why is the css an exception?
2 Takes less time to write. I have to admit, I had never used tailwind but it seems to be as fast as vanilla css or even slower
background:red
bg-red
stuff i need to write in css / tailwind. pretty much the same thing
3 tailwind provides a lot of css properties by default like box shadows, gradients and all.
css also does it! and it's even better i think. what if you want to change the border-radius of one specific element? you can't just use the tailwind class, it's configured to always use the same value, right? you still resort to regular css
I don't know about others but almost 70-80% of my apps is usually js, so I like to have as less other files as possible, specially having multiple Module.css file I something I really don't like to do, though I think it's kind of relative, right?
Once you start using it more and more the process gets faster, I admit that it makes jsx look a bit weird due to the longer class names though.
Tailwind provides methods to use custom value actually, you can just do this or extend the theme as needed by adding to tailwind.config.js.
Again, I would like to say that using vanilla css or tailwind or anything else is completely something a developer decides according to their needs and of course the one that's easier and more productive for them. I have used vanilla css in quite large projects and I still do it, that's the reason I feel like tailwind is much faster because I've been using both of them and it's quite clear which one is more productive for me.
I really like the concept of Tailwind because it is so simple and clean. I'm using that for all my new projects.
I'm kinda hooked on to tailwind as well, makes styling so much easier once you know what you're doing.
why is tailwind better than vanilla css?
.css
files.just as an example, think that you want to make your div have a gray background, rounded corners, has a width and height of 50% of screen, should be flex, and also has a box shadow.
in vanilla css, you would make a separate css file, and do something like:
whereas in tailwind it all gets converted to this:
maybe you can figure it out now why I'm hooked on to tailwind, but again it totally depends on the developer, there are developers who prefer vanilla CSS and can do it in the same amount of time I take to implement things on tailwind :)
Tailwind isn't better than vanilla css. Period.
Tailwind isn’t a replacement for vanilla CSS, it’s merely a tool to assist in applying css. Tailwind’s biggest advantage is the easy-to-apply built-in design system and shorthands for more complicated css values.
There can be no “this is better” because that’s a stupid argument to make. It’s like saying “JavaScript is better than Typescript”. Typescript merely makes life easier for devs but it’s still coming out to JavaScript.
Partially my point exactly.
I've been wanting to give it a try for a while. Is there tooling and react plugins for it? Or just be spending time in the docs?
I don't think there are plugins, you just install tailwind on your app and use class names to style the component. For installation and initialization in react you may see this, and personally, I learnt tailwind just by reading docs, the docs are easy to read, if you are ever confused about a css property and how to write it, just go over to docs and search the property. After making a few projects using tailwind, you will eventually start remembering the class names.
of course i had to reply to the wrong comment, is still can't grasp how this site works lol
1 can't agree. Do you also feel the need to not separate your .js files and write your scripts inlined? I bet you don't. Then why is the css an exception?
2 Takes less time to write. I have to admit, I had never used tailwind but it seems to be as fast as vanilla css or even slower
stuff i need to write in css / tailwind. pretty much the same thing
3 tailwind provides a lot of css properties by default like box shadows, gradients and all.
css also does it! and it's even better i think. what if you want to change the border-radius of one specific element? you can't just use the tailwind class, it's configured to always use the same value, right? you still resort to regular css
am I wrong?
I don't know about others but almost 70-80% of my apps is usually js, so I like to have as less other files as possible, specially having multiple
Module.css
file I something I really don't like to do, though I think it's kind of relative, right?Once you start using it more and more the process gets faster, I admit that it makes jsx look a bit weird due to the longer class names though.
Tailwind provides methods to use custom value actually, you can just do this or extend the theme as needed by adding to
tailwind.config.js
.Again, I would like to say that using vanilla css or tailwind or anything else is completely something a developer decides according to their needs and of course the one that's easier and more productive for them. I have used vanilla css in quite large projects and I still do it, that's the reason I feel like tailwind is much faster because I've been using both of them and it's quite clear which one is more productive for me.
fair, I I'm not saying that tailwind has no use cases, just wanted to know your perspective, thanks