Skip to main content

tailwindcss

Tailwind CSS is a utility-first CSS framework that makes it fast to build custom designs without leaving your HTML/JSX/Feliz code. Instead of writing new CSS for each component you compose styles by combining small, single-purpose utility classes.

Why use Tailwind?​

  • Rapid development: compose UI quickly with utility classes instead of creating new CSS for every component.
  • Small, maintainable stylesheet surface: unused utilities are purged in production so the final bundle stays small.
  • Highly customizable: theme tokens, variants and plugins make it easy to adapt to your design system.
  • Works great with modern toolchains like Vite and Fable (Feliz projects).
info

Because interop with tailwind and F# is so quick and easy the Feliz template also comes with tailwindcss preconfigured. You can get started with tailwindcss right away when creating a new Feliz project using the template.

IDE Support​

You can easily configure the VS Code or JetBrains Rider editors to provide autocomplete and intellisense support for Tailwind CSS classes used in Feliz applications.

Check out the following guides for setting this up in your favorite editor:

YOUR HELP NEEDED ❤️

If anyone is using a different editor and knows how to set this up there, please(!) let me know!

DaisyUI​

For common components and prebuilt design patterns, consider using DaisyUI. It is a actively maintained and very user friendly library for styled components. Using the code extension above, you will also get autocomplete and intellisense for DaisyUI classes in your F# files!