Framework
Using Tailwind sections
KitFront Tailwind sections are built for Tailwind CSS v4 and work with the Tailwind starter kit.
How it works
Open a Tailwind section
Browse a category and open the Tailwind version of the section you want to use.
Preview the section
Use the editor preview to check the section on desktop, tablet, and mobile before copying code.
Copy HTML
Copy the HTML tab and paste it into your page or component file.
Copy JS if available
If the JS tab is visible, copy that code into custom.js. If there is no JS tab, no extra JavaScript is needed.
Run Tailwind build
After updating your files, run the Tailwind build command to generate the latest CSS.
Editor tabs
Tailwind sections usually include Preview and HTML tabs. A JS tab appears only when the section needs custom JavaScript.
- Preview shows the section layout and responsive views.
- HTML contains the markup and Tailwind classes you paste into your project.
- JS appears only when extra JavaScript is required.
Why there is no CSS tab
Tailwind sections do not need separate section CSS because the styling is handled through Tailwind utility classes and the Tailwind starter kit.
Keep the copied Tailwind classes in the HTML unless you are intentionally customizing the layout.
Where to paste code
- Paste HTML into your page or component file.
- Paste JavaScript into
custom.jsonly when a JS tab is available. - Run the Tailwind build process after making changes.
Things to remember
- Always use the Tailwind starter kit before copying Tailwind sections.
- Tailwind sections are built and tested with Tailwind CSS v4.
- Copy HTML first, then JS only if available.
- Each code tab has its own copy button.
- All sections are designed to be responsive.