[Tailwind UI]: General suggestions

[majortom64]

I have really been enjoying using TailwindUI. I have a few suggestions that would make it much easier to use.

Document the number of variations in the layout at the top (on in a per component document). If are versions for 3 different screen sizes or layouts, it would be nice to know that without having to look through the whole file and hope to catch everyone. :-)

Related to that, having a version of the components that documents what the various sections do/control would be great.

For those component that are repeating items (like the lists and cards), having a version that is just the single item to make it easy to create JS components out of them would be nice.

Finally, if one were to create Vue/React/Angular versions of one of the components, is there any easy way to share them with other users?

[simonswiss]

Hey 👋

Thanks for the kind words and the suggestions!

If are versions for 3 different screen sizes or layouts, it would be nice to know that without having to look through the whole file and hope to catch everyone.

This is sometimes tricky, because many components are "fluid", in the sense that we don't think of them as different "versions", but rather adapt the layout to look as good as possible on any screen dimension.

Sure, we use specific breakpoints to achieve that, but we don't always think of a "mobile version, tablet version, desktop" version of a component.

Related to that, having a version of the components that documents what the various sections do/control would be great.

Not quite sure what you mean by "documenting what sections do/control", do you mind elaborating on that?

For those component that are repeating items (like the lists and cards), having a version that is just the single item to make it easy to create JS components out of them would be nice.

That's a really good suggestion! We kinda do that in long repeating lists, where we'll have the output for one single item, and you'll see a <!-- More items... --> comment below.

Here's an example from the Team Section components:

        <li>
          <div class="space-y-4">
            <div class="relative pb-2/3">
              <img class="absolute object-cover h-full w-full shadow-lg rounded-lg" src="..." alt="">
            </div>

            <div class="space-y-2">
              <div class="text-lg leading-6 font-medium space-y-1">
                <h4>Lindsay Walton</h4>
                <p class="text-indigo-600">Front-end Developer</p>
              </div>
              <ul class="flex space-x-5">
                <li>
                  <a href="#" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
                    <span class="sr-only">Twitter</span>
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                      ...
                  </a>
                </li>
                <li>
                  <a href="#" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
                    <span class="sr-only">LinkedIn</span>
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                     ...
                    </svg>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>

        <!-- More people... -->

Finally, if one were to create Vue/React/Angular versions of one of the components, is there any easy way to share them with other users?

We are actually working on a library called Headless UI which will allow us to power React and Vue components in Tailwind UI, so users can choose between the HTML, React or Vue version of the components.

This library will allow us to provide UI components with great accessibility standards baked in, and abstracted away into a "renderless" UI library.

We won't directly share React/Vue components before this is developed - but you're more than welcome to join the Tailwind UI discord server if you want to share your work with other folks 👍

[majortom64]

This is sometimes tricky, because many components are "fluid", in the sense that we don't think of them as different "versions", but rather adapt the layout to look as good as possible on any screen dimension.

Sure, we use specific breakpoints to achieve that, but we don't always think of a "mobile version, tablet version, desktop" version of a component.

I understand that they are not completely different versions, but there are often repeated sections for the various breakpoints, and I have found it hard to make sure I have caught them all. Something at the top of the code that says:

"This component has breakpoints that generate a small screen, a medium screen and a large screen layout of the header, a large and medium version of the user menu, and a medium and small version of the edit section." would make it easier to know what one needed to find.

Not quite sure what you mean by "documenting what sections do/control", do you mind elaborating on that?

Sure. :-)

Things like: <!-- This is the SM version of the Profile Menu -->

and
<!-- This is the layout class for the card segment of the content view -->

Using @adamwathan's screen cast showing how he built an app page using the Tailwind-UI components as a reference, he goes through the Dark Navbar and shows the various sections/functions (We can't put this here, as it would have a card inside of a card). Having the layout containers and more marked would make it much easier to do what he did in that screen cast without having to understand all the CSS (and would make it easier to learn how it works at the same time).

I am not an experienced front end developer, nor am I designer, but what I really like about TailwindCSS, Headless-UI and Tailwind-UI is that I can generate reasonable interfaces by composing the various components.

I understand that my request is less valuable to experienced frontend developers, but a non-annotated version would be easy to create for those who do not want the larger size. :-)

[simonswiss]

Hey! Thanks for sharing your thoughts, that's very valuable 👍

Adding comments like thatcan definitely add value, but potentially also add some noise if there are too many. You are right though - one of the tricks with utility-first CSS is the HTML becomes a bit harder to scan, especially in long files.

We do have small comments for sidebar mobile nav panels etc, but could contemplate adding some more in certain places.

Definitely valuable feedback - thanks for sharing, we'll take this in consideration!

[simonswiss]

Moving this to GitHub discussions as those are interesting thoughts the community should have access to.

We're trying to keep issues scoped to bugs and technical problems with Tailwind UI 👍

Thanks again for taking the time to share those thoughts, the discussion can continue where this is moving!

[majortom64]

Here is an example of what I mean:

<!--
  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
  Read the documentation to get started: https://tailwindui.com/documentation
-->

<!-- This has breakpoints for:
                navbar links (open/close - bp 3) on screen sizes bellow md (bp 4) visible above (bp 1)
                User menu (open/close with button - bp 2) in sizes md and above
                  part of navbar links on smaller screens (bp 5).

<div>
  <div class="bg-gray-800 pb-32"> <!-- Navbar header background -->
    <nav class="bg-gray-800"> <!-- Navbar bar background -->
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <!-- everything in Navbar other than the background -->
        <div class="border-b border-gray-700"> <!-- rule under menu -->
          <div class="flex items-center justify-between h-16 px-4 sm:px-0">
            <div class="flex items-center"><!-- Logo and Nav menu items -->
              <div class="flex-shrink-0"> <!-- Logo -->
                <img class="h-8 w-8" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-dark.svg" alt="Workflow logo">
              </div>
              <div class="hidden md:block"> <!-- Hides Navbar menu items on smaller screens (bp 1) -->
                <div class="ml-10 flex items-baseline space-x-4"> <!-- Navbar Links -->
                  <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Dashboard</a> <!-- Selected Page -->
                  <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Team</a> <!-- Other Page -->
                </div> <!-- End Nav bar links -->
              </div> <!-- End of Logo and Nav menu items -->
            </div>
            <div class="hidden md:block"> <!-- Bell and Profile container (bp 2) -->
              <div class="ml-4 flex items-center md:ml-6"> <!-- Profile Bell container -->
                <button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700" aria-label="Notifications">
                  <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"> <!-- Bell SVG -->
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                  </svg>
                </button>

                <!-- Profile dropdown -->
                <div class="ml-3 relative"> <!-- Profile Dropdown container -->
                  <div> <!-- Profile button and image -->
                    <button class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid" id="user-menu" aria-label="User menu" aria-haspopup="true">
                      <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
                    </button>
                  </div>
                  <!--
                    Profile dropdown panel, show/hide based on dropdown state.

                    Entering: "transition ease-out duration-100"
                      From: "transform opacity-0 scale-95"
                      To: "transform opacity-100 scale-100"
                    Leaving: "transition ease-in duration-75"
                      From: "transform opacity-100 scale-100"
                      To: "transform opacity-0 scale-95"
                  -->
                  <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"> <!-- Profile Menu container -->
                    <div class="py-1 rounded-md bg-white shadow-xs"> <!-- Profile menu background -->
                      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a> <!-- Profile Menu Item -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="-mr-2 flex md:hidden"> <!-- Mobile Button Container  (bp 3) -->
              <!-- Mobile menu button -->
              <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
                <!-- Menu open: "hidden", Menu closed: "block" -->
                <svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
                <!-- Menu open: "block", Menu closed: "hidden" -->
                <svg class="hidden h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!--
        Mobile menu, toggle classes based on menu state.

        Open: "block", closed: "hidden"
      -->
      <div class="hidden border-b border-gray-700 md:hidden"> <!-- Mobile/smaller version of the Navbar (bp 4) -->
        <div class="px-2 py-3 space-y-1 sm:px-3"> <!-- Mobile Menu Links container -->
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Dashboard</a>

          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Reports</a>
        </div>
        <div class="pt-4 pb-3 border-t border-gray-700"> <!-- Mobile User menu -->
          <div class="flex items-center px-5 space-x-3"> <!-- Mobile User menu Heading and Profile Pic container  -->
            <div class="flex-shrink-0"> <!-- Mobile User Profile Picture Container -->
              <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
            </div>
            <div class="space-y-1"> <!-- Mobile User Menu Heading Container bp 5 -->
              <div class="text-base font-medium leading-none text-white">Tom Cook</div> <!-- User Name -->
              <div class="text-sm font-medium leading-none text-gray-400">tom@example.com</div> <!-- User eMail -->
            </div>
          </div>
          <div class="mt-3 px-2 space-y-1" role="menu" aria-orientation="vertical" aria-labelledby="user-menu"> <!-- Mobile User Menu Items Container -->
            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" role="menuitem">Sign out</a> <!-- Mobile Profile Menu Item -->
          </div>
        </div>
      </div>
    </nav>
</div>```

This was what I did to make it reasonable for me to move the template to Headless UI and Vue Router links.

I am not sure it is the best documentation, but it is a first pass example.

The goal is to know at the top what breakpoints one should be seeking and to know what does what where. I am sure that experienced front end developers do not need as much hand holding as I do, but I am not sure the comments make it more difficult to use.

[simonswiss]

Thanks for sharing - that makes sense!