Open ahenriksen-inferno opened 3 years ago
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!
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.
+1
+1
+1 for allowing ":" to be used so we can use tailwind css
+1
+1 but its not only ":" but its also the "/" for w-1/2 or other witdh and height.
This would be AMAZING. +1!
$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);
};
+1 but its not only ":" but its also the "/" for w-1/2 or other witdh and height.
+1 please integrate Tailwind CSS utility classes in Oxygen Builder
+1 !
+1
+1
+1, for '='
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.