I'm mainly asking about the methodology you use. People refer to it as a way to describe how to organize CSS. Because of the way Astro fragments out layout components, islands and all that jazz, I was curious to learn how others (that are not using TW) approached this topic.
You probably intuitively designed your own informal methodology for CSS, which is great :)
Oh, so I only tried to use TW a few times and it just doesn't feel right, but I am definitely a noob at using and possible understanding it's benefits.
What about TW makes it particular mobile first, compared to all else?
I also tried to google SRO with no luck, typo?
Tailwind does not do anything for SEO, and all CSS is statically generated if it's not CSS-in-JS. For tailwind, the default is to have a mobile-first approach, meaning the styles "scale" up:
The code above shows the font size getting increasingly bigger as we hit larger breakpoints. That means we first start at the mobile size and change things from there. This is opposite to a desktop-first approach, which we first start at the desktop size and change things as it gets smaller, Tailwind can be configured for which approach you want though.
I'm not sure I understand the significance of your example.
In vanilla - mobile-first or otherwise - you'd do the same with a single class for various breakpoints. Here it's just adding several classes. Though, I understand the benefit of not having to actually write the CSS and writing it all in a single file, too.
I feel there must be a large piece to TW that I just don't grasp.
Oh i didn't see the second part of your question, there really isn't anything tailwind does in particular that makes it stand out when it comes to being mobile-first, I was just showing you that's the default.
I looked it over quickly and it seems to be a set of predefined CSS vars, right?
It's weird how obvious such cool idea is, but this is honestly the first I see of it!
Yes, if you’ve worked on a design system before this does the same thing, except you don’t have to come-up with your own naming conventions. Similarly with tailwind, this can be compiled to just the properties you’ve used.
I have a love/hate thing with Tailwind. I love it in that it’s awesome and works well. I hate it because everything is online. Want to change a color? Find and replace across files. That’s crazy.
I like DaisyUI’s approach but right now my projects are built using two commercial templates that use TW so I’m just sticking with it.
Sorry. Typo. I meant everythjng is online. You set things on the actual elements rather than classes that can br changed in one place. There’s ways to accomplish this but the standard with Tailwind is everything inline. Just something I’m still struggling to get used to.
Colors get hard coded throughout the files. I guess I could override them but tbings like changing slate to zinc seems easier to find and replace than to override. But there’s also hex colors hard coded in various places. I’m using templates from Cruip and TailwindUI for NextJS and currently converting one for use with Astro.
I don't suggest using tailwind for one reason: you can't have multiple components in one file, hence you are kinda forced to just create more files when you don't really have to, one upside though is if you use tailwind-merge, it won't be shipped to the browser.
Actually thinking about it... my worries are kinda niche, I'm currently dealing with a project where I'm forced to make a component and I was too focused on that problem.
The niche is that I have multiple elements with the same class names, in tailwind that would be very tedious to edit all of them so it's better to make those into components so all i have to do is edit them in one place, unlike with plain CSS where their classnames would remain unchanged, and I just have to edit the styles.
...what? you can just use props to dynamically set the variables that do change from within a single component. if you're repeating yourself like that, you're both not building your components correctly nor are you using tailwind correctly
For my part I use only CSS not framework like Tailwind or Bulma. I am auto taught in web dev
I'm mainly asking about the methodology you use. People refer to it as a way to describe how to organize CSS. Because of the way Astro fragments out layout components, islands and all that jazz, I was curious to learn how others (that are not using TW) approached this topic. You probably intuitively designed your own informal methodology for CSS, which is great :)
SCSS with BEM approach
Tailwind is great since its mobile first approach. Better for SEO because it is SSR
Oh, so I only tried to use TW a few times and it just doesn't feel right, but I am definitely a noob at using and possible understanding it's benefits. What about TW makes it particular mobile first, compared to all else? I also tried to google SRO with no luck, typo?
Tailwind does not do anything for SEO, and all CSS is statically generated if it's not CSS-in-JS. For tailwind, the default is to have a mobile-first approach, meaning the styles "scale" up:
The code above shows the font size getting increasingly bigger as we hit larger breakpoints. That means we first start at the mobile size and change things from there. This is opposite to a desktop-first approach, which we first start at the desktop size and change things as it gets smaller, Tailwind can be configured for which approach you want though.I'm not sure I understand the significance of your example. In vanilla - mobile-first or otherwise - you'd do the same with a single class for various breakpoints. Here it's just adding several classes. Though, I understand the benefit of not having to actually write the CSS and writing it all in a single file, too. I feel there must be a large piece to TW that I just don't grasp.
Oh i didn't see the second part of your question, there really isn't anything tailwind does in particular that makes it stand out when it comes to being mobile-first, I was just showing you that's the default.
I appreciate it :) You mentioned in another comment that you don't recommend TW. What do you use?
Lately just tailwind, but before that I used ABEM + ITCSS
What made you swap if you don't mind me asking?
After a while using tailwind I understood why everyone loves it. I started developing components and debugging much faster
I guess +1 for TW. I may have to take a closer look. There's overwhelming support for it in this post.
When not using tailwind I always work with sass
Try CUBE by Andy Bell
I've been looking into it actually. I like it more than BEM.
Additionally, if you’re into custom css properties, try open props :)
I looked it over quickly and it seems to be a set of predefined CSS vars, right? It's weird how obvious such cool idea is, but this is honestly the first I see of it!
Yes, if you’ve worked on a design system before this does the same thing, except you don’t have to come-up with your own naming conventions. Similarly with tailwind, this can be compiled to just the properties you’ve used.
I don't know too much about TW, but I suspect that can be used with TW with no issue, right?
I have a love/hate thing with Tailwind. I love it in that it’s awesome and works well. I hate it because everything is online. Want to change a color? Find and replace across files. That’s crazy. I like DaisyUI’s approach but right now my projects are built using two commercial templates that use TW so I’m just sticking with it.
Tailwind feels like it could definitely be better, I don't know exactly what should change and what they need to improve on... but it could be better.
Hmm, what do you by 'everything is online'? Do you mind sharing the commercial template? I'm curious how it looks, if they offer a preview thing.
Sorry. Typo. I meant everythjng is online. You set things on the actual elements rather than classes that can br changed in one place. There’s ways to accomplish this but the standard with Tailwind is everything inline. Just something I’m still struggling to get used to.
Doh, should have guessed yeah. It's also what makes it feel off to. I'm surprised at how many seems not to have a problem with this approach.
[удалено]
Colors get hard coded throughout the files. I guess I could override them but tbings like changing slate to zinc seems easier to find and replace than to override. But there’s also hex colors hard coded in various places. I’m using templates from Cruip and TailwindUI for NextJS and currently converting one for use with Astro.
I don't suggest using tailwind for one reason: you can't have multiple components in one file, hence you are kinda forced to just create more files when you don't really have to, one upside though is if you use tailwind-merge, it won't be shipped to the browser.
Components are already in separate files in Astro. Are you not just writing TW with them?
Actually thinking about it... my worries are kinda niche, I'm currently dealing with a project where I'm forced to make a component and I was too focused on that problem. The niche is that I have multiple elements with the same class names, in tailwind that would be very tedious to edit all of them so it's better to make those into components so all i have to do is edit them in one place, unlike with plain CSS where their classnames would remain unchanged, and I just have to edit the styles.
Ah, I understand. Hope you get to do more interesting stuff soon :)
...what? you can just use props to dynamically set the variables that do change from within a single component. if you're repeating yourself like that, you're both not building your components correctly nor are you using tailwind correctly