profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/davidluhr/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
David Luhr davidluhr Independent consultant Bend, Oregon https://luhr.co Independent consultant working on accessible design and code. Creator of Build UX on YouTube.

BendJS/simple-website 2

BendJS main website

troygerber/ng-pinewood-derby 1

Angular 4 app for running a pinewood derby.

davidluhr/a11y-hallway-talk 0

A11y hallway talk resources

davidluhr/armchair-product-page-ui-study 0

Starter files for a UI study of Armchair Product Page by Ricardo Salazar on Dribbble

davidluhr/david-luhr-portfolio 0

My personal portfolio site

davidluhr/fortran 0

A recreation of a Fortran punch card

davidluhr/jekyll-starter-kit 0

My own personal starter kit with Jekyll, Pug, and some of ShakyShane's jekyll-gulp-sass-browser-sync setup.

push eventdavidluhr/david-luhr-portfolio

David Luhr

commit sha e8877fa952a3bc73dbe5de744cc02753a9fe7c0f

Update recent clients and projects

view details

push time in 3 days

issue closedtailwindlabs/tailwindui-issues

Alpine.js Support

<!-- Tailwind UI has been built for you, so we're always interested in hearing your ideas for new components.

Before creating a request, be sure to see if someone has already made a similar request in the public Tailwind UI Roadmap in Trello: https://trello.com/b/Nh6e9w8Q/tailwind-ui-roadmap

If so, feel free to add a vote to the request so we can gauge interest.

We can't promise that we will design/build every single suggestion, but if we think something would be useful to meaningful portion of the community we will absolutely explore it. -->

Hey there, I just think it would be awesome to have Alpine.js as an option. I know that is a big request and if I could somehow help, I would. I use TailwindCSS UI components with Alpine.js and it's a match made in heaven for rapid development.

closed time in 14 days

MFFunmaker

issue commenttailwindlabs/tailwindui-issues

Alpine.js Support

@MFFunmaker Thank you for this suggestion! Currently, with Headless UI (which powers the interactive components in Tailwind UI), we're focused on React and Vue support to meet the demand from the large majority of users. While it's possible we may expand support in the future, we have to focus on serving as many customers as possible. I've made note of this request with the team, and we appreciate the feedback!

MFFunmaker

comment created time in 14 days

issue commenttailwindlabs/tailwindui-issues

Small bug in React code for Header (Simple links centered)

@mplis-ta Thank you for reporting this! I've updated the code to ensure that the key uses the correct object name. The fixed version should be live on the site soon.

mplis-ta

comment created time in 15 days

issue closedtailwindlabs/tailwindui-issues

Small bug in React code for Header (Simple links centered)

What component (if applicable)

  • URL for category: https://tailwindui.com/components/marketing/elements/headers
  • Component name: Simple links centered

Describe the bug One part of the React component uses the wrong variable when creating the element key:

{resources.map((item) => (
    <a
        key={resources.name}
        href={item.href}
        className="text-base font-medium text-gray-900 hover:text-gray-700"
    >
        {item.name}
    </a>
))}

Expected behavior

Code should be:

{resources.map((item) => (
    <a
-        key={resources.name}
+        key={item.name}
        href={item.href}
        className="text-base font-medium text-gray-900 hover:text-gray-700"
    >
        {item.name}
    </a>
))}

closed time in 15 days

mplis-ta

issue closedtailwindlabs/tailwindui-issues

Suggestion: Printable image of each component

A printable image of each component would allow developers to quickly plan their next big thing as a jigsaw puzzle. Not on a computer screen but on a table or a whiteboard.

closed time in 15 days

wouterdorgelo

issue commenttailwindlabs/tailwindui-issues

Suggestion: Printable image of each component

@wouterdorgelo Thanks for the suggestion! One thing that may be helpful is viewing the site while logged out. Most components are PNG previews, which would be easier to print. You could also screenshot any component and print from there. Hope that helps!

wouterdorgelo

comment created time in 15 days

issue closedtailwindlabs/tailwindui-issues

Ecommerce | Product list: Compact list variant

Hi there,

First of all, I absolutely love your products and what you are building with Tailwind, TailwindUI and all the other stuff. For me, as a developer with just basic design and CSS skills, it makes developing beautiful, responsive UIs so much easier now.

However, what I noticed is, that all the ecommerce components are built with beautiful images as the center of the product. Not sure how high the demand is, but there are many use cases where shops are selling (unsexy) products where images don't deliver much value, or shops where there are only partially product images available. Or even worse: there are no images at all.

Imaging restaurants selling their meals, or shops selling the same type of product with different specifications (e.g: cables), or shops with a huge amount of products, where product lists should be more compact to make scrolling through easier. These kind of things are probably more difficult to style then shops with a few products with beautiful images.

I think something like a list-style based variant of the product list would be an approach to address this need. Is there anything planned in this direction?

closed time in 17 days

tho-masn

issue commenttailwindlabs/tailwindui-issues

Ecommerce | Product list: Compact list variant

@tho-masn Thanks for the kind words! Happy to hear Tailwind UI is providing value in your work.

Thanks for the suggestion as well. I've added a link to this issue to a card in our Tailwind UI public roadmap in Trello, where the community can vote for what they'd like us to add:

https://trello.com/c/ZfFGfwqz/166-text-focused-product-list

tho-masn

comment created time in 17 days

issue closedtailwindlabs/tailwindui-issues

Responsive Images

It would be great if the components could support responsive images. Right now every image is a single img only. But in terms of web page speed optimisation having responsive images is essential.

closed time in 17 days

jand000

issue commenttailwindlabs/tailwindui-issues

Responsive Images

@jand000 Thank you for the feedback. Any instance of an <img> tag can make use of srcset for non-art direction optimization with multiple image files.

If you need art direction, you should be able to wrap <img> with <picture>and add any <source> elements as needed.

Since this is implementation-specific, it's not likely that we will provide this pattern directly in Tailwind UI, but you change the markup freely and at most you may need to move a couple classes around. Hope that helps!

jand000

comment created time in 17 days

issue commenttailwindlabs/tailwindui-issues

Action is not available at smaller widths

@vangundy Just looping back through older issues. Thank you for your patience on this, and thanks for the feedback! I've added the "New Post" and "Go Premium" CTAs to the mobile menu. The updated version should be live soon.

Thanks for helping us improve things!

vangundy

comment created time in 18 days

issue closedtailwindlabs/tailwindui-issues

Action is not available at smaller widths

What component (if applicable)

  • URL for category: https://tailwindui.com/components/application-ui/page-examples/home-screens#component-41dce55c4cd0a0045706dcab2156c2f2
  • Component name: With secondary nav and tertiary column

Describe the bug The red "New Post" button has no corresponding equivalent to trigger action at narrower widths.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://tailwindui.com/components/application-ui/page-examples/home-screens#component-41dce55c4cd0a0045706dcab2156c2f2
  2. Resize to narrow width.
  3. See missing action for "New Post"

Expected behavior I expect that the drop down menu that appears for narrower widths would include an item for "New Post".

closed time in 18 days

vangundy

issue closedtailwindlabs/tailwindui-issues

Request: add component id to comment for easy reference

I would love for the components to have its id in the comments, so I can reference them.

I find myself copying the url of #component-id and add it to the top comment in my code, for every component I use.

Like this:

<!-- https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11 -->
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="bg-white">
  ...
</div>

closed time in 18 days

emcoding

issue commenttailwindlabs/tailwindui-issues

Request: add component id to comment for easy reference

@emcoding Thanks for this suggestion! It's definitely an interesting idea that we will consider. We appreciate the feedback!

emcoding

comment created time in 18 days

issue closedtailwindlabs/tailwindui-issues

TailwindUI's css differs from latest

What component (if applicable)

  • URL for category: https://tailwindui.com/components/marketing/elements/headers
  • Component name: "Headers" > "Centered with bottom border"

Describe the bug Copying and pasting the "Centered with bottom border" component into a fresh Laravel project results in the UI not properly working. In particular, the "solutions" and "more dialogs" will not close and automatically open. Additionally, the buttons are centered aligned instead of being left aligned.

Expected behavior A clear and concise description of what you expected to happen.

Screenshots https://postimg.cc/sQr9RmHG

Browser/Device (if applicable) Browser: brave Package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.3.3",
        "@tailwindcss/typography": "^0.4.1",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.3.1",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.3.6",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^2.2.7"
    },
    "dependencies": {
        "@tailwindcss/aspect-ratio": "^0.2.1",
        "install": "^0.13.0",
        "npm": "^7.20.6"
    }
}

Additional context Upon inspection, it appears that using the latest stable version of tailwindcss (v2.2.7 ) differs from your your demo site tailwindcss (v2.2.4 ).

The UI website is very unclear of exact versions to use for tailwindcss and other dependencies. Perhaps add a badge for each UI component providing the versions, or if it passes the latest version.

closed time in 18 days

charleskhenry

issue commenttailwindlabs/tailwindui-issues

TailwindUI's css differs from latest

@charleskhenry I have copied the component code into a fresh project and everything appears as expected.

the "solutions" and "more dialogs" will not close and automatically open

Please note that we do not provide custom JavaScript for these components, outside of the React and Vue code, which makes use of Headless UI components. Therefore, when pasting in the plain HTML version, the menus won't open/close, and by default they are visible. The JavaScript implementation depends on the specific project.

Additionally, the buttons are centered aligned instead of being left aligned.

This is correct. The buttons are left-aligned up till the lg breakpoint, and then they are center aligned. You will see this same layout in the component preview: https://tailwindui.com/components/marketing/elements/headers#component-1c0390a81b16cf5028aeff08be955766

Upon inspection, it appears that using the latest stable version of tailwindcss (v2.2.7 ) differs from your your demo site tailwindcss (v2.2.4 ).

These dependencies share the same major and minor version, so there shouldn't be any difference between them. You are free to use the latest stable version of Tailwind CSS.

Hope this helps! Closing this issue, as everything is working as intended, but feel free to reply here with any questions and we're happy to help.

charleskhenry

comment created time in 18 days

issue closedtailwindlabs/tailwindui-issues

Please add Angular to "Integrating with JavaScript frameworks"

I know there are a lot of Medium post etc how to integrate TW with Angular, but some official docs would make the case for using Tailwind /w Angular/Enterprise projects so much more "sellable".

closed time in 21 days

stehag

issue commenttailwindlabs/tailwindui-issues

Please add Angular to "Integrating with JavaScript frameworks"

@stehag Just looping through open issues. To better help track this suggestion, I've added a link to this issue to a card in our public Tailwind UI roadmap in Trello, where the community can vote for what we should add:

https://trello.com/c/EC0SOH82/165-add-angular-integration-docs

Thank you for the suggestion!

stehag

comment created time in 21 days

issue commenttailwindlabs/tailwindui-issues

Remove flyout menus from header components

Just looping through older issues. Since we've made note of this suggestion internally, I'm closing this issue. I'll be sure to reply here if there are any relevant updates. Thanks!

tim-kilian

comment created time in 21 days

issue closedtailwindlabs/tailwindui-issues

Remove flyout menus from header components

What component (if applicable)

Describe the bug My problem is, that the mix of headers and flyout menus increases the size of the header template and make it hard to read. I am always removing the flyouts and because they are defined twice in headers and in flyout-menus. I know it may looks better in the preview, but working with it, makes it much more frustrating to separate it from each other each time.

Expected behavior Do not include flyouts in headers elements.

closed time in 21 days

tim-kilian

issue closedtailwindlabs/tailwindui-issues

Missing focus trap for responsive sidebar navigation

What component (if applicable)

  • URL for category: https://tailwindui.com/components/application-ui/page-examples/settings-screens
  • Component name: With sidebar navigation and constrained content area

Describe the bug When tabbing through the example with the collapsible sidebar placed "above" the content, you can continu tabbing through the underlying content, instead of staying in the sidebar.

To Reproduce Steps to reproduce the behavior:

  1. Go to the example with sidebar navigation and constrained content area
  2. Resize the example to see the responsive version with collapsible sidebar
  3. Tab through the sidebar
  4. After the last item "logout" the focus disappears to the underlying content

Expected behavior I expect the focus to be trapped in the sidebar.

Screenshots If applicable, add screenshots to help explain your problem. afbeelding

Browser/Device (if applicable)

  • OS: MacOS Catalina
  • Browser: Chrome, Firefox
  • Version: most recent

Additional context Add any other context about the problem here.

closed time in 21 days

JoseeWouters

issue commenttailwindlabs/tailwindui-issues

Missing focus trap for responsive sidebar navigation

@JoseeWouters Just looping back through open issues. Thank you for reporting this.

Our examples on the site do not represent the full accessibility/functionality of the final components. Essentially, we mimic the overall interactions with AlpineJS as a close approximation of the full React and Vue experience, which use Headless UI to power the accessible, interactive components.

As a result, the example doesn't included focus trapping/cycling, but the actual Modal component when using Headless UI does. We will try to update the examples to include this in the future, but please note that the actual code for these components does include the needed functionality.

Thank you for your feedback!

JoseeWouters

comment created time in 21 days

issue commenttailwindlabs/tailwindui-issues

Home Screen example with menu inside table

@PericlesTheo Thank you for reporting this.

We're looking into a fix for this and related issues: https://github.com/tailwindlabs/tailwindui-issues/issues/681 and https://github.com/tailwindlabs/tailwindui-issues/issues/555

PericlesTheo

comment created time in 21 days

issue commenttailwindlabs/tailwindui-issues

Issue regarding dropdowns combined with tables

@anthonymakela Thank you for reporting this.

We're looking into a fix for this and related issues: https://github.com/tailwindlabs/tailwindui-issues/issues/681 and https://github.com/tailwindlabs/tailwindui-issues/issues/692

anthonymakela

comment created time in 21 days

issue commenttailwindlabs/tailwindui-issues

Menu dropdown direction

@alainbelez Thank you for reporting this.

We're looking into a fix for this and related issues: https://github.com/tailwindlabs/tailwindui-issues/issues/555 and https://github.com/tailwindlabs/tailwindui-issues/issues/692

alainbelez

comment created time in 21 days

issue closedtailwindlabs/tailwindui-issues

Hero section component 'with sign up and media content' is broken

What component (if applicable)

  • URL for category: https://tailwindui.com/components/marketing/sections/heroes#component-351873ecf5c4a3f4708d4513ea7738f6
  • Component name: (Hero component) with sign up and media content

Describe the bug When I copy/paste the HTML, it looks broken. Other components work fine.

To Reproduce Steps to reproduce the behavior:

  1. Go to the bug URL, copy the HTML only code and paste it in a .html file that already imports tailwind css.
  2. Save the doc and view it in browser
  3. See a big black box and broken alignments

Expected behavior A clear and concise description of what you expected to happen.

Screenshots Screenshot 2021-08-25 at 2 20 14 PM

Browser/Device (if applicable)

  • Mac OS
  • Brave
  • Version 1.28.106 Chromium: 92.0.4515.159 (Official Build) (arm64)

Additional context Add any other context about the problem here.

closed time in 21 days

nocodesina

issue closedtailwindlabs/tailwindui-issues

Nav Components Dropdowns Always Expanded in SvelteKit

What component (if applicable)

  • URL for category: https://tailwindui.com/components/application-ui/navigation/navbars
  • Component name: https://tailwindui.com/components/application-ui/navigation/navbars#component-b6bd4615a762a0d24780157803ad319e

Describe the bug When trying to add this in Sveltekit, the menus are always expanded and not responsive to clicks.

To Reproduce Steps to reproduce the behavior:

npx degit navneetsharmaui/sveltekit-starter my-app
cd my-app
code src/lib/shared/ui/components/header/Header.svelte
# <PASTE A NAVBAR FROM TAILWINDUI.COM>
yarn
yarn dev

Expected behavior Functional dropdowns from navbar

Screenshots image image

Browser/Device (if applicable)

  • Browser Chrome

Additional context I understand that SvelteKit is in Beta and not (formally?) supported to the extent of React/Vue. At the same time, it's hard to use Tailwind + SvelteKit without functional navigation. If you could advise how to get these functional with a low level of effort, that would be fantastic!

closed time in 21 days

ryanrussell

issue commenttailwindlabs/tailwindui-issues

Nav Components Dropdowns Always Expanded in SvelteKit

@ryanrussell Sorry for the delayed response.

Thanks for the feedback regarding adding Svelte support to Headless UI for the future. I've made note of this request with the team.

ryanrussell

comment created time in 21 days

issue closedtailwindlabs/tailwindui-issues

Broken design issue with Vue3

What component (if applicable)

  • URL for category: https://tailwindui.com/components/application-ui/navigation/navbars
  • Component name: Navbar

Describe the bug The user image in Navbar seems to broken with Vue3 setup. Screenshot 2021-05-09 at 12 30 44 PM

Browser/Device (if applicable)

  • MAC, Windows and Linux
  • Firefox, Safari, Chrome
  • All versions.

Additional context I am using the following vue setup:

{
    "private": true,
    "scripts": {
        "dev": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.11",
        "autoprefixer": "^10.2.5",
        "axios": "^0.21",
        "laravel-mix": "^6.0.0-beta.17",
        "lodash": "^4.17.19",
        "postcss": "^8.2.13",
        "tailwindcss": "^2.1.2",
        "ts-loader": "^9.1.1",
        "typescript": "^4.2.4",
        "vue": "^3.0.11",
        "vue-loader": "^16.2.0"
    },
    "dependencies": {
        "@headlessui/vue": "^1.1.1",
        "@heroicons/vue": "^1.0.1",
        "@tailwindcss/aspect-ratio": "^0.2.0",
        "@tailwindcss/typography": "^0.4.0",
        "@vue/composition-api": "^1.0.0-rc.8",
        "sass-loader": "^11.0.1",
        "vue-router": "^4.0.6"
    }
}

closed time in 21 days

jatinthapar1910