Allow class names with colons ":" so that we can use all Tailwind CSS utility classes

[ahenriksen-inferno]

Describe the feature you'd like to see included in Oxygen. I would like to be able to use ALL Tailwind CSS utility classes in Oxygen (e.g. focus:outline-none, dark:bg-gray-800, md:w-32, etc.). Currently, Oxygen does not allow class names with colons ":" which prevents me from using all the utility classes.

What are the use cases for this feature? In order to speed up the development process, I develop custom functionality plugins for my client's websites that contain utility classes from Tailwind CSS. Using these pre-made classes cuts development time down significantly.

Examples of this feature or functionality. An example would be if I would like to create a dark mode version of the website alongside the default version with minimal effort. See https://tailwindcss.com/docs/dark-mode for an example.

[KittenCodes]

https://github.com/soflyy/oxygen-bugs-and-features/issues/1375

[pr0jectile]

Although not the most ideal solution, one way around this would be to change the seperator:

https://tailwindcss.com/docs/configuration#separator

However, I do agree that class names with colons should be parsed through so +1 for this feature!

[pr0jectile]

I think I've found a temporary fix which can probably be implemented in a next update @Spellhammer?

In /oxygen/component-framework/angular/controllers/iframe.min.js find:

return/^[a-z_-][a-z\d_-]*$/i

and replace with:

return/(^[1-9]{1}[a-z]{2}:[a-z][a-z\d_-]*$)|(^[a-z]{2}:[a-z][a-z\d_-]*$)|(^[a-z_-][a-z:\d_-]*$)/i

Original code is at /oxygen/component-framework/angular/controllers/controller.classes.js line 600

This seems to work for me and it's very TailwindCSS specific for the first 2 groups, whilst still containing the original regex in the 3rd group and adding ":" to the last set, but not sure if it's the correct way of doing this – it seems very clunky to me!

I'm sure someone more versed with regex will chime in on this but does the trick for now! :)

EDIT: I've noticed pseudo-classes like :before, :after in the selectors dropdown are saving but not outputting on the frontend. There's going to be work needed for those to work.

[stphnwlkr]

+1

[hssktm]

+1

[kevin-pauls]

+1 for allowing ":" to be used so we can use tailwind css

[Larotu]

+1

[Brandinwebdesign]

+1 but its not only ":" but its also the "/" for w-1/2 or other witdh and height.

[PwrSrg]

This would be AMAZING. +1!

[Rados51]

$scope.iframeScope.validateClassName = function (name) {
    let re = /^[\/:a-z_-][\/:a-z\d_-]*$/i;
    //let re = /-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/i;
    return re.test(name);
};

[williammei]

+1 but its not only ":" but its also the "/" for w-1/2 or other witdh and height.

[Vedaslav]

+1 please integrate Tailwind CSS utility classes in Oxygen Builder

[Deichscheich]

+1 !

[naimulcsx]

+1

[lucianahanan]

+1

[wheeleran]

+1, for '='