0

Summary: I took over managing a TailwindCSS website and don't have the tailwind.config.js file.

Problem: How do I rebuild the TailwindCSS for my site, without the tailwind.config.js file used to create it?

Question: is there a way to reverse generate/create the tailwind.config.js file used to generate the TailwindCSS used on my website?

Detail: I just joined a company where the person I replaced (who left the company), built our corporate website using TailwindCSS. The problem is, I can't find the config file used to build the Tailwind CSS bundle - preventing me from creating new html pages. How can I "reverse generate" from the existing CSS I have to recreate the build config.js file used for Tailwind?

What have I tried: I have tried loading up a single page of our corporate site at https://play.tailwindcss.com/ and iterating (manually) on what the config.js file might have included that generated our corporate website; however, the output is radically off.

As such, is there a technical way to "reverse generate" what the tailwind.config.js was that resulted in the CSS that generated my site?

Mike P.
  • 47
  • 2
  • 1
    Why the downvote? Wouldn't it be more productive to add a comment than to just blindly downvote - that way we can have a health discussion as to why you think this is a bad question. – Mike P. Sep 05 '21 at 19:56
  • SO is not for discussing matters. Its for specific coding issues that can be answered with a citation. Also questions should have an community interest. Questions that do not meet the guidelines will be downvoted by veteran users for the reason to keep the site on track. Otherwise the site would be flooded with low-quality questions and the skilled developers that search for an issue would not find any usefull answers. – tacoshy Sep 05 '21 at 20:36
  • @tacoshy assuming you're one of the individuals who downvoted me, I have updated my post to add clarity on my technical problem and question. Hopefully you view my question of value since to me, it's a complete blocker to my job at the moment. – Mike P. Sep 05 '21 at 20:56
  • Is there a way to: a. Download the non-purged default- tailwind.css file b. Diff (at the class level not file level) my-tailwind.css with default-tailwind.css c. Remove from the diff any css classes found in default-tailwind that aren’t in my-tailwind d. Remove any class that are the same between both files e. (Which should leave) only classes that are new or altered from the default tailwind file Since this would be a diff at the class level (not file level) I’m not sure how to do that. @tacoshy – Mike P. Sep 07 '21 at 01:38

1 Answers1

0

I would start by setting up a sandbox to experiment with site rebuilding. Try building existing content with default Tailwind config, then compare the output with your live site. Using diff -ur should help you identify specific features that need to be configured. Adjust these config options and build again until the list of differences between your sandbox and the live site are minimal (date stamps or similar).

You might also try doing a grep -r for any config options you know would have been used. Keep in mind that the config file does not have to be called tailwind.config.js (see the docs for more). You might get lucky and find that the config was just named something unexpected.

Kenny
  • 125
  • 6
  • I should have stated that in my original post but yes, I have been testing different new config files at https://play.tailwindcss.com/ where I load 1 page of html and try to manually figure out what I need to add to the config file to get it to render the desired output. Problem is, it's so far off from looking anything like the site I inheritted - I'm concerned I'm not going to be able to figure it out. – Mike P. Sep 05 '21 at 20:30
  • Is there a way to: a. Download the non-purged default- tailwind.css file b. Diff (at the class level not file level) my-tailwind.css with default-tailwind.css c. Remove from the diff any css classes found in default-tailwind that aren’t in my-tailwind d. Remove any class that are the same between both files e. (Which should leave) only classes that are new or altered from the default tailwind file Since this would be a diff at the class level (not file level) I’m not sure how to do that. – Mike P. Sep 07 '21 at 01:39
  • To get a class-by-class diff: After ensuring the formatting is the same with a CSS pretty-printer, I would open the two files in vimdiff. By default, any matching lines will be hidden. Significantly changed or reordered sections may appear as if they only exist in one file. Smaller changes will be highlighted. – Kenny Jan 06 '22 at 02:20