Documentation

Read Blade Application UI Documentation ›

Packages

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: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
    ],
}

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.

Icons

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

JavaScript

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.