Closed connecteev closed 4 years ago
kiliman
commented
4 years ago That's why I mentioned that you should use the ADDTAILWINDCSS_URL=/custom.css setting. Copy your custom css file to the root of the OUTPUT. The preview will now load your custom CSS instead of the CDN version.
kiliman
commented
4 years ago Actually just noticed a bug, so going to push a hotfix.
kiliman
commented
4 years ago Ok, fixed in 2.4.1. Set the URL for your tailwind css and it should show up in your preview.
kiliman
commented
4 years ago It should look something like this
kiliman
commented
4 years ago Fixed in d30857f90e09fbf67b3a6869f87831dd466baaf1
connecteev
commented
4 years ago @kiliman thanks for the quick response! I did a git pull right now, so my code is up to date. Running this again with these settings doesnt work. My tailwind.config.css doesnt get created so I am still seeing the same thing.
OUTPUT=../tailwindui_output
BUILDINDEX=1
HTMLMODE=alpine
TRANSFORMERS=addTailwindCss,prefixSrc,useInter,prefixClasses,convertVue,stripAlpine
VUE_OUTPUT=$OUTPUT/vue
STRIPALPINE_OUTPUT=$OUTPUT/no-alpine
# addTailwindCss
ADDTAILWINDCSS_URL=$OUTPUT/tailwind.config.css
# prefixClasses
PREFIXCLASSES_PREFIX=tw-I also tried with ADDTAILWINDCSS_URL=./tailwind.config.css but I had no luck.
As an aside, why do we need ADDTAILWINDCSS_URL at all? If PREFIXCLASSES_PREFIX is specified, why not just create a tailwind.config.css in the $OUTPUT folder?
kiliman
commented
4 years ago It doesn't generate the css. You need to generate it then copy the css to the OUTPUT folder. Eventually I will support generating from the config file.
connecteev
commented
4 years ago I see...makes sense. I manually created the file, but I noticed that it still doesnt work.
TRANSFORMERS=addTailwindCss,prefixSrc,useInter,prefixClasses,convertVue,stripAlpine
VUE_OUTPUT=$OUTPUT/vue
STRIPALPINE_OUTPUT=$OUTPUT/no-alpine
# addTailwindCss
# Note: This config file does not get auto-generated. Please make sure it already exists.
ADDTAILWINDCSS_URL=$OUTPUT/tailwind.config.css
# prefixClasses
PREFIXCLASSES_PREFIX=tw-
This is from the index.html file, it looks like it's not referencing the local file:
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>Ok I think I see what is happening here. It does reference the local file from withinthe components, just not the index file.
Also, the local file needs to be the final tailwind css file, and not the config file...
connecteev
commented
4 years ago @kiliman Ok I found some bugs here, which explain why I was seeing the problem:
Based on my .env file above:
ADDTAILWINDCSS_URL=$OUTPUT/tailwind.cssand will generate a URL like this: http://localhost:5000/components/marketing/sections/tailwindui_output/tailwind.css
It has to be in this format:
ADDTAILWINDCSS_URL=/tailwind.cssEnhancement 2: It would be nice to auto-generate the tailwind.css file at this location automatically (and do away with the ADDTAILWINDCSS_URL setting, so you only need the prefixClasses and PREFIXCLASSES_PREFIX settings).
Problem 3?: As an aside: /tailwindui_crawler_kiliman/tailwindui_output/components/marketing/sections/heroes/simple_centered.html still contains:
<link rel="stylesheet" href="../tailwindui_output/tailwind.css" />But /tailwindui_crawler_kiliman/tailwindui_output/components/marketing/sections/heroes/index.html contains:
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>This is seen with all index.html files (at the main level and the level of all sub-folders)
Hope this helps make the software better. And I hope I am not becoming an annoyance. if so, let me know and I will stop! And thanks again for the repo!
kiliman
commented
4 years ago Yes, that's not really a bug.
1) The ADDTAILWINDCSS_URL must be a URL (either absolute or relative to the root). The default is https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css. addTailwindCss adds <link href="{url}"/> to all the component pages. So if you want to use your custom CSS, then you need to copy that somewhere in the OUTPUT folder and set the URL relative to it. That way when the component HTML is loaded in the preview iframe it will load you custom CSS. You don't want to use $OUTPUT for this value since that is a file system path, not a URL (relative to /).
2) Again, this was just a temporary workaround until I implement #16 to generate the custom CSS. In the meantime, you'll need to manually generate the CSS and copy it to your OUTPUT folder.
3) The index files will always reference the CDN since they don't require the prefixed CSS as those pages are independent of your Tailwind UI components.
Thanks again for the feedback. Perhaps the documentation can be improved to make this clearer.
connecteev
commented
4 years ago @kiliman thanks for the clarifications. It makes total sense. #16 would be nice and I hope to see that implemented soon!
vesper8
commented
4 years ago @kiliman I don't know if it's something I've done wrong but I have applied the new prefixClasses converter and it works on the html (tw- gets prefixed to all classes) however it has no effect on the vueOutput when using the convertVue converter.. that output is generated without the prefixes
kiliman
commented
4 years ago The order of the transformers is important. Make sure prefixClasses comes before convertVue. The output of one becomes the input of the next.
vesper8
commented
4 years ago 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!
connecteev
commented
4 years ago Agreed, I am living for this tool!
@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:
And this is what gets output in the HTML:
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!