Category: Basic

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 […]

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:

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.

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 […]

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 […]

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 […]

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 […]

TailwindCSS framework comes with mobile first logic. In the wizard we are using name Breakpoints to be easier to understand, but in TailwindCSS config and docs it’s named Screens. Breakpoints that you set in wizard will be in pixels. Sidebar options Load presets To get you started fast we prepared tree sets of breakpoints for […]

Sidebar options Load pressets To get you started fast we prepared tree set of font families for you that you can insert with just a click. Preset 1: Title,Body Preset 2: Title,SubTitle, Body Builders Font Families Under the builders integration you will be presented active builders that you can include to fetch the font family […]

From the version 2.4.0 you will be able to migrate Wizard settings between website by exporting .json file. You can import settings by dragging .json file. You can create backups in the database and switch between with a single click pressing load config button. Here is what you can do in the Backups tab: Export […]