tailwindui-crawler: Components dont get rendered if you use prefixClasses for tailwind prefix replacement

@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!

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 16 (8 by maintainers)

Most upvoted comments

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!

vesper8 on Apr 19, 2020