4 ms·

Remember that text-red-500 can be changed in one place across the application and allows you to apply general design ideas to quickly build layout. I don't pers

Remember that text-red-500 can be changed in one place across the application and allows you to apply general design ideas to quickly build layout. I don't personally use anything like tailwind, but the self-rolled css library I do use has a whole section of one liners like "flex" or "vertical-center" that saves me hours.

lmm 5y ago
> Remember that text-red-500 can be changed in one place across the application What, so that it actually means blue and 400? That doesn't sound good for maintainability.
- colejohnson66 5y ago
  That’s an odd concern. Programmers have always been able to rework things maliciously. I can redefine console.log to wipe your hard drive if I wanted to. Redefining “red” is for if you want to tweak the shade. For example, changing it from ff0000 (or whatever) to, say, cc0000. Then all the darkness values (100-900) update automatically. If “red-500” is your company color, it should be redefined in your config as “company” and write “text-company-500”. That way, if your company branding changes, you don’t have to “hack” red-500 to be blue-400; you just change the definition of “company”. They’re basically CSS variables.
  - lmm 5y ago
    Sounds like this "config" (which is what, some preprocessor that generates your actual markup?) is what's actually doing all the work.
    - colejohnson66 5y ago
      The “config” is just tailwind.config.json next to your package.json. The most basic file is literally just: module.exports = {} That alone gives you all the Tailwind defaults. But it’s customizable to infinity. tailwindcss.com’s documentation on individual classes is extensive on customization.
      - lmm 5y ago
        OK but you still haven't given any example of the part that actually does something, the part where you somehow go from "text-company-500" to red and whatever.
        colejohnson66 5y ago
        Why? We're discussing Tailwind in this thread. If you aren't aware that Tailwind isn't just the classes, but also a CSS preprocessor, we can't have a productive conversation. But if you insist: https://tailwindcss.com/docs/adding-custom-styles https://tailwindcss.com/docs/adding-custom-styles There you can see that the example config file there defines custom colors (which could be your company branding colors). They don't have to be named actual colors; I could use `"mygreen": "#8FB68F"` (random color I just generated) if I so desired. Then, during my website's build process (into static HTML), any usages of "text-mygreen-500", for example (colors are 100-900), will generate a CSS selector automagically.
        lmm 5y ago
        We're discussing how to set up a maintainable website where you can do things like change your company's brand colour from red to blue in one place and apply that consistently across your website. "Use Tailwind" isn't an answer to that any more than "Use CSS" or "Use HTML" is.
    - lghh 5y ago
      Yep, and that’s the point.
      - lmm 5y ago
        If your point is "I can write some code to output HTML with the appropriate styling" then... yes, but at that point why use HTML as the input format? (Because you can edit it in an HTML editor? Yes, but you undermine that if your styling isn't working at that point, in the same way as the Apache SSI problem described in the article). I think the article is talking about the kind of HTML that gets rendered by a web browser rather than the kind that's used as an internal representation in some other system.
        iratewizard 5y ago
        When I write layout, I do it in a way that requires as little new css as possible. To do that, I rely on one liners that do the heavy lifting. When I was new, I would assign a class to a div, then write the padding and margins for that class. I would try to make general classes, like a class I can assign to all buttons, but I didn't have the right mindset. Now, I can define my flex boxes, vertical flex boxes in a snap. Apply one of several common padding and margins to an element in a one-liner. Throw "vertical-center" onto an element to make it align-items:center. 80% of the layout I need to do can be composed in one shot without new css. Then I can make fine-tune adjustments using variables. I don't remember what the exact text of any of the 4 box shadows I use. I know I apply two shadows (one shallow dark one and one further light one), but I couldn't tell you what the opacity is on either. I don't need to. I either apply it in the class or @extend .shadow-1;
        lmm 5y ago
        OK, so what's the thing that actually does this? Clearly you're not talking about CSS as implemented in the browser, the thing that the article and this comment are about, because "@extend .shadow-1;" is not CSS syntax. And assuming that thing is some kind of processor that generates HTML/CSS, what do you gain from having the input to this processor be pseudo-HTML/pseudo-CSS rather than whatever format is most suitable for expressing things?

lmm 5y ago

> Remember that text-red-500 can be changed in one place across the application What, so that it actually means blue and 400? That doesn't sound good for maintainability.

colejohnson66 5y ago
That’s an odd concern. Programmers have always been able to rework things maliciously. I can redefine console.log to wipe your hard drive if I wanted to. Redefining “red” is for if you want to tweak the shade. For example, changing it from ff0000 (or whatever) to, say, cc0000. Then all the darkness values (100-900) update automatically. If “red-500” is your company color, it should be redefined in your config as “company” and write “text-company-500”. That way, if your company branding changes, you don’t have to “hack” red-500 to be blue-400; you just change the definition of “company”. They’re basically CSS variables.
- lmm 5y ago
  Sounds like this "config" (which is what, some preprocessor that generates your actual markup?) is what's actually doing all the work.
  - colejohnson66 5y ago
    The “config” is just tailwind.config.json next to your package.json. The most basic file is literally just: module.exports = {} That alone gives you all the Tailwind defaults. But it’s customizable to infinity. tailwindcss.com’s documentation on individual classes is extensive on customization.
    - lmm 5y ago
      OK but you still haven't given any example of the part that actually does something, the part where you somehow go from "text-company-500" to red and whatever.
      - colejohnson66 5y ago
        Why? We're discussing Tailwind in this thread. If you aren't aware that Tailwind isn't just the classes, but also a CSS preprocessor, we can't have a productive conversation. But if you insist: https://tailwindcss.com/docs/adding-custom-styles https://tailwindcss.com/docs/adding-custom-styles There you can see that the example config file there defines custom colors (which could be your company branding colors). They don't have to be named actual colors; I could use `"mygreen": "#8FB68F"` (random color I just generated) if I so desired. Then, during my website's build process (into static HTML), any usages of "text-mygreen-500", for example (colors are 100-900), will generate a CSS selector automagically.
        lmm 5y ago
        We're discussing how to set up a maintainable website where you can do things like change your company's brand colour from red to blue in one place and apply that consistently across your website. "Use Tailwind" isn't an answer to that any more than "Use CSS" or "Use HTML" is.
  - lghh 5y ago
    Yep, and that’s the point.
    - lmm 5y ago
      If your point is "I can write some code to output HTML with the appropriate styling" then... yes, but at that point why use HTML as the input format? (Because you can edit it in an HTML editor? Yes, but you undermine that if your styling isn't working at that point, in the same way as the Apache SSI problem described in the article). I think the article is talking about the kind of HTML that gets rendered by a web browser rather than the kind that's used as an internal representation in some other system.
      - iratewizard 5y ago
        When I write layout, I do it in a way that requires as little new css as possible. To do that, I rely on one liners that do the heavy lifting. When I was new, I would assign a class to a div, then write the padding and margins for that class. I would try to make general classes, like a class I can assign to all buttons, but I didn't have the right mindset. Now, I can define my flex boxes, vertical flex boxes in a snap. Apply one of several common padding and margins to an element in a one-liner. Throw "vertical-center" onto an element to make it align-items:center. 80% of the layout I need to do can be composed in one shot without new css. Then I can make fine-tune adjustments using variables. I don't remember what the exact text of any of the 4 box shadows I use. I know I apply two shadows (one shallow dark one and one further light one), but I couldn't tell you what the opacity is on either. I don't need to. I either apply it in the class or @extend .shadow-1;
        lmm 5y ago
        OK, so what's the thing that actually does this? Clearly you're not talking about CSS as implemented in the browser, the thing that the article and this comment are about, because "@extend .shadow-1;" is not CSS syntax. And assuming that thing is some kind of processor that generates HTML/CSS, what do you gain from having the input to this processor be pseudo-HTML/pseudo-CSS rather than whatever format is most suitable for expressing things?