Leaderboard

I'm VScode user and this on the settings.json does the trick: "tailwindCSS.includeLanguages": { "latte": "php" }, Guessing here, try something like https://www.jetbrains.com/help/phpstorm/tailwind-css.html#ws_css_tailwind_complete_classes_custom_context //or maybe "latte": "php" "includeLanguages": { "latte": "html" },

That's not how this works. You can use TailwindCSS and LESS at the same time, but pulling Tailwind into LESS... haven't seen this combo anywhere in the wild. BUT... you can use the Tailwind's base.css (or however it's called in RockFrontend) and write modern CSS in it. That will work. /*Tailwind base.css*/ @tailwind base; @tailwind components; @tailwind utilities; + modern CSS: /*Tailwind + CSS */ @tailwind base; @tailwind components; @tailwind utilities; header { --brand-clr-main: #111; --brand-clr-accent: #f33; h1 { color: (--brand-clr-main); @apply text-3xl; a { text-decoration: none; border-bottom: 2px var(--brand-clr-accent) dashed; @apply text-orange-500; } } } You would skip LESS and rewrite it with native/modern CSS. There are variables, nesting, ... and probably more that makes that switch a bit easier.

I also had to switch from LESS to SASS now. That was possible this way: 1.) Install bernhard's SASS module: https://processwire.com/modules/scss/ 2.) Change asset loading to the following: $rockfrontend->styles() // add tailwindcss provided by RockFrontend ->add('/site/templates/bundle/tailwind.css') // add custom styles ->add('/site/templates/src/scss/custom.scss') // minify on production // note: this does not concatenate the files ->minify( $config->debug ? false : true ) ; Note that the SCSS entrypoint file is loaded with add(). With the SCSS parser, one doesn't have to load the whole SCSS-folder with addAll() as described above regarding LESS. And it also works recursively without setting the recursion depth. I tested it until 3 levels deep. 3.) If you want to use UIKit, add this to your SCSS entry point file (example): // 1. Your custom variables and variable overwrites. $global-link-color: #DA7D02; // 2. Import default variables and available mixins. @import '../../uikit/src/scss/variables-theme.scss'; @import '../../uikit/src/scss/mixins-theme.scss'; // 3. Your custom mixin overwrites. @mixin hook-card() { color: #000; } // 4. Import UIkit. @import '../../uikit/src/scss/uikit-theme'; Note that the example is taken from https://getuikit.com/docs/sass . I tested this, and it works. Please adjust the file paths according to where your SCSS entry point file is placed. Also note that the SASS module uses https://github.com/scssphp/scssphp . This library does not support for example @use . I had to change all my "math.div()" back to "/". But the SCSSPHP team announced that they will support newer SCSS features with the upcoming 2.0 release. So it's just a matter of time.

Hey @nurkka I'd second what @wbmnfktr said and recommend switching to modern css as much as possible. Or course it always depends on the situation and use case, but in general I think modern CSS is much more powerful. For example I've developed a website for a client where we have 3 different business units which have their own color (blue/green/yellow). This is called the "primary-color". Using css variables it is possible to switch colors easily across sections, so example.com/boats is blue example.com/outdorr is green and example.com/sunsails is yellow. So all I do is adding this: html { --col-primary: #ff0000; } Then I can use var(--col-primary) in my css and all colors will be changed. Using CSS variables instead of LESS has many benefits, for example: It will work with only one CSS file. The color will be set in the HTML. Using LESS you can only set @col-primary to ONE value. That means you'd have to create main-blue.css, main-green.css and main-yellow.css Using CSS variables it is even possible to set different colors for different sections on the page. For example on the frontpage we can show blog posts from all sections and depending on the section they belong to we can set a different color. But all cards will use the same CSS. All you have to do is this: <h2>Blog posts boats</h2> <div style='--col-primary: blue'> ... </div> <h2>Blog posts outdoor</h2> <div style='--col-primary: green'> ... </div> <h2>Blog posts sunsails</h2> <div style='--col-primary: yellow'> ... </div> This is very powerful and not possible in LESS/SCSS. I'm still using LESS for convenience, for example for RockPageBuilder it is still nice to have, because I can "namespace/scope" css via nesting, so that added css does not mess with global css defined somewhere else.

Great hint, thank you. My logic for getting the block now looks like /** @var FieldData $blocks */ $blocks = $page->rockpagebuilder_blocks; /** @var Block $contactformBlock */ $contactformBlock = $blocks->get('type=ContactForm, _mxhidden=0'); This gets only non-hidden blocks which is perfect for my use case.

Inputfield Dependency Helper Adds "Insert field name" and "Insert value" dropdown menus to help with constructing show-if/required-if conditions, aka inputfield dependencies. The "Insert field name" menu helps you remember the field names that exist in your site (or exist in the current template) and avoids typos. The "Insert value" menu lets you select values for Page Reference or Select Options fields via the human-friendly label whereas the show-if/required-if conditions require those values to be inserted as numerical IDs. Insert field name When you click the button a dropdown menu appears listing field names, with the field labels in parentheses. When editing a field in template context only the fields that exist in the template are listed, and the field labels are in template context. When editing a field outside of template context all the non-system fields are listed. When you click an item in the list the field name is inserted into the settings field. Insert value When using a Page Reference or Select Options field value in a show-if/required-if condition you have to enter the numerical ID of the page/option, and this is not so user-friendly – often you have to switch to another tab and go and look up the relevant ID. The "Insert value" button is intended to make this process easier. When you click the button a dropdown menu appears listing any Page Reference and Select Options fields that exist in the current template (when editing in template context) or in the site. When you click one of the fields the selectable options for the field are AJAX-loaded into a flyout menu. Clicking one of the selectable options will insert the numerical ID of the option into the settings field. Configuration In the module config you can set a limit to the number of selectable options shown in the menu, so the menu doesn't get excessively long. https://github.com/Toutouwai/InputfieldDependencyHelper https://processwire.com/modules/inputfield-dependency-helper/

Looks great. Wouldn't that be worth a PR?