[Feature Proposal] Online Configuration

[type1fool]

I have a project that lives only in the file:// domain, and where I cannot use build tools. The CDN version is great for this, but I lose out on a handful of features, specifically focus-within.

So, I'm proposing a new configuration page on tailwindcss.com to allow for customization in similar use cases. Instead of taking the Bootstrap approach of using a mega form, the Tailwind configurator would be a JSON text editor with a small selection of presets. This may use something like the Monaco Editor.

Once the user hits a submit button, a serverless function would generate the tailwind.css & tailwind.min.css files and download to the browser.

I'm curious how many Tailwinders would benefit from this. I would be willing to contribute to the project if it's going to be adopted.

[brasilikum]

Sound like something useful to have. Why do you need for it to be adopted? Have I understood right that it would basically be "Tailwind-Processing as a service"?

I am not familiar with running the processing in the browser. If it would be possible that would lower the cost to host it to 0, which is nice.

[type1fool]

If the browser can process the config and compile a CSS file for download, that would be great. I don’t know if that’s possible.

[type1fool]

Sound like something useful to have. Why do you need for it to be adopted? Have I understood right that it would basically be "Tailwind-Processing as a service"?

I expect the benefits of this feature to be:

• Allow TW variant configuration without requiring users to setup a build process
• Educational use for prospective and new users
• Potentially display output .css file size as the config is changed
• Theme customization without build tools

Again, my use case is focus-within, which is not included in the CDN version of Tailwind. I'm using Vue and TW for a small un-hosted app (file://app.html) for a medium sized office, and I'm developing in an unofficial capacity. In my second gig, I'm able to use all of the features of TW via PostCSS and WebPack.

Technically, a simpler solution would be to provide a few TW CDN versions with different utilities and variants, but then everyone is going to request a version to fit their specific needs.

I am not familiar with running the processing in the browser. If it would be possible that would lower the cost to host it to 0, which is nice.

I have no experience with WebAssembly, but maybe it's possible to compile via WebPack in the browser according to this article.

[adamwathan]

Agree this would be a cool thing to build. There's already a quick and dirty version of this at https://tailwindcss.now.sh built by @bradlc, but it would be awesome to slap a pretty face on it.

Also, this aside is there any reason you can't just precompile Tailwind locally and copy the compiled file into your project?

[brasilikum]

I did not find it's sourcecode, could you link it?

[type1fool]

Also, this aside is there any reason you can't just precompile Tailwind locally and copy the compiled file into your project?

@adamwathan That would be too easy.

Agree this would be a cool thing to build. There's already a quick and dirty version of this at https://tailwindcss.now.sh built by @bradlc, but it would be awesome to slap a pretty face on it.

This is a barebones version of what I'm thinking. Didn't know it existed. Source code would be nice.

[brasilikum]

@adamwathan That would be too easy.

I did not understand this. Are you being ironic?

[type1fool]

@adamwathan That would be too easy.

I did not understand this. Are you being ironic?

Yes, sorry. It may be possible to compile my custom Tailwind and get it to work, but it's a large company with strict security. Emailing the file might work depending on the firewall, but USB sticks are a no-go.

At any rate, this is just a proposal. It seems like Zeit Now's free tier would cover this use case.

[brasilikum]

Ok, sounds like a pointless measure if you are then allowed to include code from any random domain, but I understand it's out of your control. In this case, could you just compile it on your machine and put it on a free cdn?

[type1fool]

@brasilikum I'd like to make this issue less about how I get a custom Tailwind file to a single project, and more about whether an online config tool would be useful to the community as a whole. Displaying an interactive editor that demonstrates TW's configurability would make the library appealing to newcomers who haven't yet caught the drift. At minimum, it lowers the barrier to entry for anyone who wants to customize TW.

I hope that clarifies what this could accomplish.

[hacknug]

I think @bradlc's stuff is over here:

• https://github.com/bradlc/tailwindcss-as-a-service
• https://www.npmjs.com/package/tailwindcss-language-server

Also @utkarshkukreti just released https://tailwind.run/ whichs seems to do what you wanted: https://github.com/utkarshkukreti/tailwind.run

[type1fool]

Thank you @hacknug! tailwind.run was exactly what I needed. There may still be an opportunity for an official TW configuration tool, but my needs are met.

@adamwathan Feel free to close this if you don't want to pursue the idea. Thanks for TW and filling in for Derrick!

[magicspon]

I have been toying with the idea of building something like this...
User can either use the default config, or import there own.
Then have a sketch/figma styled interface where you could alter settings, and see example markup being changed, on the fly. Even insert your own markup, or fetch from another url. And then export... It would be a great tool for QA.