With latest Winden release you can have DaisyUI and TailwindCSS in WordPress with one line of code. DaisyUI Installation In the style tab add this line of code after calling TailwindCSS. DaisyUI Autocomplete values Once DaisyUI is added to the style tab you will get also DaisyUI classes in autocomplete. Autocomplete with DaisyUI works in […]
Read MoreAuthor: devusrmk
Why Tailwind CSS
In a world with countless CSS frameworks, Tailwind CSS stands out for its utility-first approach. While traditional frameworks offer pre-defined components that can sometimes limit customization, Tailwind provides the building blocks to create unique, responsive designs quickly. Here’s why Tailwind is gaining traction among developers and why you might consider adopting it for your next […]
Read MoreWinden: How does it work?
Winden provides full integration of TailwindCSS JavaScript for the framework, TailwindCSS configuration, and TailwindCSS styling within visual builder iframes and website front ends. While developing a website, the entire framework is loaded, allowing you to see an instant preview as you add classes to your elements. In addition to framework integration, Winden offers helper functions […]
Read MoreStyle Tab
One of the biggest challenges when using a framework is knowing what to do when it doesn’t quite cover everything you need. Tailwind is built to be flexible and customizable from the start, so you can adapt it to fit any project without feeling constrained. CSS Using CSS and @layer When you need to add […]
Read MoreConfig Tab
The theme section of your tailwind.config.js file is where you define your project’s color palette, type scale, fonts, breakpoints, border radius values, and more. Keep in mind that the difference between Winden and TailwindCSS config in their documentation they are using: and since Winden is ESM based, we are using:
Read MoreStyle Gallery
Here you will have entire overview of what is changed inside config + wizzard. It is great for holistic overview and also learning purpose. Currently style gallery have: Also those sections also have the links to the official Tailwind CSS docs.
Read MoreWizard
Winden Wizard is an add-on for the Config Tab, allowing you to design configurations with an enhanced UI and instant preview. Options Priority Winden Wizard is a lower-level add-on than the Config Tab. This means that if you set a color in the Wizard, it can be overwritten in the Config Tab. This approach is […]
Read MoreWizard Colors
Sidebar options Load pressets To get you started fast we prepared tree set of colors for you that you can insert with just a click. Neutrals, Primary, Secondary Include Utility Colors Utility colors are non colors that you need for every project. They are always the same and that is why once included you will […]
Read MoreWizard Spaces
By default the spacing scale is inherited by the padding, margin, width, minWidth, maxWidth, height, minHeight, maxHeight, gap, inset, space, translate, scrollMargin, and scrollPadding core plugins. This will use exactly the same process and font sizes. The only difference we will be using it for spacing. Until this page is not done you can refer […]
Read MoreWizard Font Sizes
This will give you option to generate font sizes with scale ratio, based on steps you defined. If you do not like scale ratio you can also overwrite values. Sidebar options Disable Fluid By the default we are using fluid scale where we calculate: Everything below minimum screen size will have fixed minimum font size,and […]
Read More