Tailwindcss: Proposal: ship tailwind with "tw-" as the default prefix

[connecteev]

I am using Laravel with tailwindcss. I love tailwind - the ONLY thing I don't like about it is that it does not come with a default prefix set. I know you can set that in tailwind.config.js, and I know it's not as "pretty" to have this prefix with every class, but it will allow for ultimate flexibility.

The current problem is that not having it set by default means that it's hard to recognize a tailwind class / style when you see it. Especially in large projects, where you have legacy / custom css that you want to (slowly) get rid of.

Laracasts, for example, uses "tw-" as a prefix for tailwind, and I've adopted the same convention. Can we make this the default, given that most people will not change the default value? As tailwind gets bigger and better, and more code samples pop up, it would be great to have this be the default. Think about copying a tailwind component from somewhere - it's easy to remove "tw-", but a lot harder to do a search and replace to add a "tw-" prefix to every (tailwind-only) class, especially the more complex ones with negative prefixes and so on.

Please consider making this the default!

[crswll]

This would add a lot of repetition for people who don't need it.

I think of prefix as an "incase tailwind conflicts with a lot of css that already exists already", which doesn't happen often due to semantic classnames only ever really conflicting with other semantic classnames.

[connecteev]

I don't see "tw-" as a lot of repetition, and the advantages outweigh the costs. And that's my point...in legacy projects with a lot of css, not having the prefix becomes a real problem. Same with when you're copy-pasting css from anywhere that does not use tailwind, becomes a hell of a problem distinguishing the non-tailwind css from the tailwind css. I get that people hate change, but like FB's periodic redesigns, people will get used to it and come to appreciate this. That's my hunch but will leave it to @adamwathan to decide of course.

[adamwathan]

No plans to do this by default, but that’s why the configuration option is there. We may add a prefixed version to the CDN in addition to the non-prefixed version but the default will always be the non-prefixed version.
On Aug 2, 2019, 12:37 AM -0400, Kunal Punjabi [e-mail], wrote:

I don't see "tw-" as a lot of repetition, and the advantages outweigh the costs. And that's my point...in legacy projects with a lot of css, not having the prefix becomes a real problem. Same with when you're copy-pasting css from anywhere that does not use tailwind, becomes a hell of a problem distinguishing the non-tailwind css from the tailwind css. I get that people hate change, but like FB's periodic redesigns, people will get used to it and come to appreciate this. That's my hunch but will leave it to @adamwathan to decide of course.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[vesper8]

@adamwathan I think what would be really invaluable is a way to either automatically apply a prefix to all tailwind classes with some kind of tool or bash script, or another way of adding it, so that we can still write regular tailwind classes, but somehow at build time it's detected that we want it prefixed a certain way and it gets applied. Not exactly sure how that would work, but I know that adding tw- to dozens if not hundreds of classes manually is much too tedious

[gcw07]

@vesper8 See https://tailwindcss.com/docs/configuration#prefix

[connecteev]

@gcw07 the point is this won’t work if you have an existing tailwind project without the prefix. Or if you find a tailwind component or snippet on the web and want to use it.

[vesper8]

@gcw07 don't know why you pointed me to the docs, I already read them and am already using a prefix in my projects. I was pointing out that it would be mighty useful to have a means of applying a prefix on existing tailwind components that don't have a prefix.

For example say you have a project that uses Tailwind and you have thousands of tailwind classes spread over dozens or more files. And all of a sudden you want to start using a prefix. There is no easy way, short of doing dozens of mass search/replace operations, to add a prefix to all those classes.

Or as @connecteev pointed out, say you're using a prefix and want to use someone else's component.. you're going to have to do a lot of manual work adding the prefix to every class.

A script to automate this, or another creative solution, is what I would like to see added.

[gcw07]

@vesper8 Yes, I didn't realize originally you wanted to do it post writing your HTML.

[vesper8]

I made a small tool that can apply a prefix to vanilla tailwind classes. It should work on all classes from 1.1.2 release. You can use it online here: https://github.vue.tailwind-prefix.cbass.dev/

[connecteev]

@vesper8 thanks for sharing the link. Would love to see this tool merged in and officially supported by tailwindcss, given that the tailwind codebase is ever-evolving and new classes get added frequently.

[vesper8]

if @adamwathan wants to do that then I'll be happy to share the code

[ricky-sb]

@vesper8 would you mind sharing the code? I would like to include this in my project. In development, I'd like to use the regular Tailwind classes, and when I compile, I'd like to automatically convert them to all contain the tw- prefix.

[vesper8]

@ricky-sb Sure thing : )

Here it is https://github.com/vesper8/vue-tailwind-prefix-applicator

The two files that matter are in this folder: https://github.com/vesper8/vue-tailwind-prefix-applicator/tree/master/src/views

[oraant]

We may add a prefixed version to the CDN in addition to the non-prefixed version ...

Is there any progress? Really like it in this way!!

[connecteev]

@vesper8 I've been using your tool and it's saved me some time. One minor bug on https://github.vue.tailwind-prefix.cbass.dev/

-translate-x-1/2 -translate-y-1/4
are ignored and should become:
tw--translate-x-1/2 tw--translate-y-1/4
Similarly for other negative values (of translate, etc)