1. 20

  2. 3

    Can someone explain to me what Tailwind CSS is? I couldn’t figure it out from their website. If it is a CSS style, why does one need npm or PostCSS? I’m really curious how I could use it for my home projects/personal website, and what it would bring me.

    1. 2

      If it is a CSS style, why does one need npm or PostCSS?

      The CSS style itself is called “Utility-first CSS”. Tailwind is just one of its implementations (perhaps the first widely known). The idea is that you create CSS classes based on small utilities instead of components, so <h1 class="text-large text-blue underline">My Header</h1> instead of <h1 class="main-header">My Header</h1>. It is more verbose on the HTML side, yes, but it makes easier to refactor things on the CSS side.

      I know that seems weird. The first time I read about utility-first CSS I wasn’t sold on it either, but I really think you should try it for yourself. Once I’ve started working with it, I enjoyed it way more than I thought I would.

      As for the second part of your question: Tailwind is a bunch of utility CSS classes. So, for instance, you have text-black for setting the text color, border-black for setting the border color, etc. If you were to add a new color to your design system, you would need to manually create lots of these small CSS classes (say, text-fuchsia, border-fuchsia, and so on). With the preprocessor, you can just define that new color on a JSON file and Tailwind generates them all for you. Same thing for different sizes or whatelse you want to change.

      Another useful feature that PostCSS allows you to do without much trouble is adding a prefix to all Tailwind classes. For example, instead of text-black, you can have tw-text-black, so if you’re adding Tailwind to an existing website, it doesn’t conflict with things that you already have.

      1. 2

        I did not know about that tailwind prefix stuff!! This means I can start using tailwind on a bootstrap project right now, without having to port the whole app over to tailwind!! Thanks!

      2. 2

        It’s better to watch some videos on YouTube in my opinion. Really hard to understand how it’s useful until you use it.

        Basically it’s a utility first CSS library.

        You need postcss to trim out the unused CSS classes, which means you end up with a very tiny amount of CSS in production.

        1. 1

          My explanation might is not complete or precise… but hope it is of some help.

          Tailwind allows low-granularity composable declarations of styles mixed within your HTML.

          Here is a weird analogy…. imagine in the future – you would be able to go to a pharmacy and get medication that’s ‘pre-designed’ and ’manufactured on the fly, at the time of order – for your genome, your medical history, your current condition. Certainly, manufactures of those medications, are not going to pre-manufacture the meds for all possible combinations of people. Otherwise we would have unsolvable combinatorial explosion, of sorts. We would solve it by creating ‘utility’ chemicals that are combined in smart ways, given the input of your specific needs, at the time of your order.

          So tailwind allows to define a combination of say ‘fonts’, ‘font-sizes’, angles’, ‘colors’, etc – just by typing in the things you need within your HTML (or JSX ).

          And then during build time , by means of npm packages – it essentially creates a ‘css framework’ for your site, based on what it detected you had used in your html.

        2. 1

          Here’s the link to the blog post explaining the release: https://blog.tailwindcss.com/tailwindcss-v2