Skip to main content

Support for tailiwind fluid

Feature Request

Would be nice to have an option to convert media query to tailiwind fluid https://fluid.tw/

so for example instead of 

pt-32 md:pt-44 min-[1250px]:pt-64 min-[1920px]:pt-80


we would get

~pt-32/80

So basically just the min and the max sizes.

This will make the code much more readable

Posted by zank ·
15 comments

Comments15

  • brian

    Team•

    Jul 4, 2024

    Hi Zank, that's a very good suggestion!

  • zank

    •

    Jul 4, 2024

    When the website i convert have like 5/6 breakpoints for every unit reading the code get almost impossible and I have to convert each one manually


    this

    <li class="pb-10 pt-6 list-item md:pt-10 md:pr-0 md:pb-10 md:pl-0 md:mt-0 md:mr-9 md:mb-0 md:ml-9 md:w-[calc(50%_-_71px)] min-[1250px]:mt-0 min-[1250px]:mr-14 min-[1250px]:mb-0 min-[1250px]:ml-14 min-[1250px]:pt-12 min-[1250px]:pr-0 min-[1250px]:pb-12 min-[1250px]:pl-0 min-[1250px]:w-[calc(50%_-_114px)] min-[1920px]:mt-0 min-[1920px]:mr-16 min-[1920px]:mb-0 min-[1920px]:ml-16 min-[1920px]:pt-16 min-[1920px]:pr-0 min-[1920px]:pb-16 min-[1920px]:pl-0 min-[1920px]:w-[calc(50%_-_126px)] min-[2048px]:w-[calc(50%_-_126px)]" 					>

    Would become this

    <li class="~pb-10/16 ~pt-6/16 list-item ~pr-0/0 ~pl-0/0 ~mt-0/0 ~mr-9/16 ~mb-0/0 ~ml-9/16 ~md/2xl:w-[calc(50%_-_71px)]/[calc(50%_-_126px)]">

    so basically just set the min and max value (eventually with breakpoints ~md/2xl:xxx)

    It is a semplification, but in most of the cases it works and make the code much more readable.

    Thanks

    • brian

      Team•

      Jul 4, 2024

      I agree that the copied code is too big. The reason is that, DivMagic tries to capture the same style so if the website put a lot of different values to different breakpoints, it gets all of them.

      Fluid definitely makes it easier. On top of that, do you think there's other ways we can simplify the Tailwind version too? Should we skip some of the middle values or not include non-standard breakpoints widths? Or any other way?

      • zank

        •

        Jul 4, 2024

        I think that if someone pick the adaptable mode and fluid media query like so

        it could just simplify the code by using tailwind closest breakpoint (unless is very far).

        That would be cool as well!

        I think the way it could work is, there is a value for padding p-4 then there are other breakpoints let's say

        min-[768px]:p-8
        min-[1024px]:p-10
        min-[1600px]:p-12

        min-[1920px]:p-16

        it could detect that they all refer to the padding and in that case just pick the min value and the max value like so

        ~p-4/16

        if there is the case where there is also mixed units like

        min-[1920px]:p-[5rem]

        it could also just be something like

        ~p-4/[5rem]

        Converting to the closest value would be a plus

        ~p-4/20

        That is the case where there are breakpoints close to the standards one, so let's say breakpoints+-200px or so, in case it's very far fluid tailwind also support arbitrary breapoints like ~min-[20rem]/lg:~text-base/4xl

        If instead there is a case where there are only breakpoints values like so

        min-[768px]:p-8
        min-[1024px]:p-10
        min-[1600px]:p-12

        min-[1920px]:p-16

        it could just take the min breakpoint and if the max breakpoint is close to the maximum one just set the minimum one like so

        ~md:~p-8/16

        If it's smart enought to match to the closest default breakpoints this would be great, same for the values.

        for the point of ignoring the middle values I think that if someone pick the fluid option and adaptable mode there should only be 1 class per value, for example 1 for padding, 1 for text size, etc... and all the breakpoints in the middle should be ignored, if there are particular case it could always be tweaked by hand way easier than doing the other way around.

        • brian

          Team•

          Jul 4, 2024

          This is great input Zank thanks a lot!

          We can definitely do closest match. Some properties already work like that such as font size (ex: If font size is 0.9rem, you'd see "text-sm" in tailwind output even though text-sm is 0.875rem). The percentage of "closeness" is hard-coded and perhaps that could be adjustable too.

          We liked the "fluid" option a lot. Only detail is that, it could also apply to regular Tailwind output. For example, skipping middle breakpoint values could be useful for people who want regular Tailwind and not Fluid Tailwind.

          Using the same example,

          min-[768px]:p-8
          min-[1024px]:p-10
          min-[1600px]:p-12

          min-[1920px]:p-16

          a Fluid user would want: "~md:~p-8/16"

          a Tailwind user could want: "p-8 md:p-16"

          We can't group both of these under a single Media Query Fluid option because they both have the style format as Tailwind.

          We could add a new media query option like "Optimized" or "Balanced" which can ignore middle breakpoint values and for Fluid Tailwind we would have a separate Style Format? An issue for that could be, the Style Format list will grow very big if we keep adding new formats there so we need a good way to handle that in the UI.

          These are just details and if you have any opinions we'd love to hear. Like I said, adding an option to reduce media point styles will be very useful.

          We'll start the implementation now and if we see any edge-cases or places where user input would be needed we'll ask here again.

          • zank

            •

            Jul 5, 2024

            "p-8 md:p-16"

            How do you determine the end brekpoint, it will be fixed to md?

            For the grouping the way it think it could work is,

            considering the case

            p-4

            min-[768px]:p-8
            min-[1024px]:p-10
            min-[1600px]:p-12

            min-[1920px]:p-16

            • media query on + adaptable = p-4 md:p-16

            • media query on + balanced = p-4 md:p-8 lg:p-10 xl:p-12 2xl:p-16

            • media query fluid + adaptable = ~p-4/16

            • media query fluid + balanced = ~p-4/16 (i don't know about that)

            At this point it would probably make sense to default the option to balanced to not confuse people, right now I don't know all the different logics between the 2 tho.

          • zank

            •

            Jul 16, 2024

            Did you made some experiment?

            • brian

              Team•

              Jul 17, 2024

              Yes! We added the code that merges breakpoints together. We’re trying to decide on how to put it in the UI. Most likely it’ll be included in the next release

              • zank

                •

                Jul 20, 2024

                Awesome

              • Anonymous User

                •

                Aug 4, 2024

                Hi, is there an expected date for the next release?

                Thanks

                • brian

                  Team•

                  Aug 4, 2024

                  We’re trying to finish it by the 2nd week of August. Our goal is doing an update at least once every month but depending on the complexity sometimes it takes longer.

                  Please create issues here and vote on your preferences so we can prioritize the most needed features

                  • zank

                    •

                    Aug 6, 2024

                    That’s great, looking forward for the next release!

                    Have a nice day.

                  • Anonymous User

                    •

                    Sep 4, 2024

                    Hello, is there any news about this feature? Thanks

                  • zank

                    •

                    Sep 21, 2024

                    Hello, is there any news about this feature? thanks

                    • brian

                      Team•

                      Sep 25, 2024

                      Hi Zank, we had to prioritize other features such as WordPres Integration. This is still in our queue to work on. I will let you know when we add it.