Read Blade Application UI Documentation ›


Installing packages

To use Razor UI to its maximum potential we recommend installing these Node.js packages:

  • @tailwindcss/forms
  • @tailwindcss/typography
  • @tailwindcss/aspect-ratio

Tailwind configuration

This is the recommended configuration.

const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
    mode: 'jit',

    purge: [
        // ./resources/**/*.blade.php
        // ./resources/**/*.js
        // ./resources/**/*.ts
        // ./resources/**/*.vue
        // ./resources/**/*.jsx
        // ./resources/**/*.tsx

    darkMode: false,

    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', ...fontFamily.sans],

    plugins: [

We try to keep JIT usage to a minimum. But in some cases JIT felt like the best solution. We've tried to keep it simple so you can easily swap it out with a standard Tailwind class.


The icon set we're using is Iconic made by Make Lemonade.


The "Vue-ish" attributes you see are provided by Alpine.js. We think this is the best solution for now because it's familiar, and easily translatable to frameworks like Vue.js or React.js.

Don't see it as a restriction. Use it like a guideline for your own implementation.