Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Components dont get rendered if you use prefixClasses for tailwind prefix replacement

See original GitHub issue

@kiliman I just tested #15 out, and the prefix replacement works beautifully. Really neat, and this will save a good chunk of time as well, so I no longer have to manually do it using https://github.vue.tailwind-prefix.cbass.dev/

There is a problem, though. Without #16, this is what happens: https://www.webpagescreenshot.info/#v2=4CUgNYg52

Here’s my env file:

OUTPUT=../tailwindui_output
BUILDINDEX=1
HTMLMODE=alpine
TRANSFORMERS=addTailwindCss,prefixSrc,useInter,prefixClasses,convertVue,stripAlpine
VUE_OUTPUT=$OUTPUT/vue
STRIPALPINE_OUTPUT=$OUTPUT/no-alpine

# prefixClasses
PREFIXCLASSES_PREFIX=tw-

And this is what gets output in the HTML:


<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

<style type="text/css">
html, .font-sans{font-family:"Inter var",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
.sm\:font-sans{font-family:"Inter var",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
.md\:font-sans{font-family:"Inter var",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
.lg\:font-sans{font-family:"Inter var",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
.xl\:font-sans{font-family:"Inter var",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
</style>
</head>
<body>
<div class="tw-bg-white">
  <div class="tw-max-w-7xl tw-mx-auto tw-py-8 sm:tw-px-6 lg:tw-px-8">
    <div class="tw-border-t tw-border-gray-200 tw-px-4 tw-flex tw-items-center tw-justify-between sm:tw-px-0">
      <div class="tw-w-0 tw-flex-1 tw-flex">
        <a href="#" class="tw--mt-px tw-border-t-2 tw-border-transparent tw-pt-4 tw-pr-1 tw-inline-flex tw-items-center tw-text-sm tw-leading-5 tw-font-medium tw-text-gray-500 hover:tw-text-gray-700 hover:tw-border-gray-300 focus:tw-outline-none focus:tw-text-gray-700 focus:tw-border-gray-400 tw-transition tw-ease-in-out tw-duration-150">
          <svg class="tw-mr-3 tw-h-5 tw-w-5 tw-text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
          </svg>
          Previous
        </a>

Since none of the tw- styles are defined on the CDN version, none of the components are styled. Is there a setting I am missing, or is this still something you’re working on? Once again, many thanks for all the work you’re doing on this!

Issue Analytics

State:
Created 3 years ago
Comments:16 (8 by maintainers)

Top GitHub Comments

1reaction

vesper8commented, Apr 19, 2020

Oh I see! If that’s mentioned in the docs I must have missed it. A small enhancement would be to have the converters that generate the output to default to the end of the chain. Thanks for the answer! Really loving this tool!

0reactions

connecteevcommented, Apr 19, 2020

Agreed, I am living for this tool!