CSS Framework

Add a CSS framework like Tailwind CSS or Windi CSS

Tailwind CSS

From tailwindcss.com

Install dependencies and generate config.

pnpm install tailwindcss postcss autoprefixer -D
npx tailwindcss init -p

Add Tailwind CSS to app.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Update config files.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./resources/**/*.{vue,js,ts,jsx,tsx,php}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Plugins

You can add Tailwind CSS plugins.

pnpm add @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/line-clamp -D

And add it to configuration.

const plugin = require("tailwindcss/plugin");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./resources/**/*.{vue,js,ts,jsx,tsx,php}"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(({ addComponents }) => {
      addComponents({
        ".debug-screens": {
          '@apply before:bottom-0 before:left-0 before:fixed before:px-1 before:text-sm before:bg-black before:text-white before:shadow-xl before:content-["screen:_"] sm:before:content-["screen:sm"] md:before:content-["screen:md"] lg:before:content-["screen:lg"] xl:before:content-["screen:xl"] 2xl:before:content-["screen:2xl"]':
            {},
          "&:before": {
            "z-index": "2147483647",
          },
        },
      });
    }),
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/line-clamp"),
  ],
};

Add TypeScript

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
};

Windi CSS

From windicss.org

Add windicss.

pnpm add vite-plugin-windicss windicss -D

Create configuration.

touch windi.config.ts

Windi CSS configuration.

import { defineConfig } from "windicss/helpers";
import defaultTheme from "windicss/defaultTheme";
import formsPlugin from "windicss/plugin/forms";
import typographyPlugin from "windicss/plugin/typography";
import plugin from "windicss/plugin";

export default defineConfig({
  darkMode: "class",
  theme: {
    extend: {
      container: {
        center: true,
      },
      screens: {
        sm: "360px",
        md: "600px",
        lg: "900px",
        xl: "1300px",
        "2xl": "1536px",
        "3xl": "1920px",
      },
    },
  },
  shortcuts: {
    "debug-screens": {
      "@apply":
        'before:bottom-0 before:left-0 before:fixed before:px-1 before:text-sm before:bg-black before:text-white before:shadow-xl @sm:before:content-["screen:sm"] @md:before:content-["screen:md"] @lg:before:content-["screen:lg"] @xl:before:content-["screen:xl"] @2xl:before:content-["screen:2xl"] <sm:before:content-["screen:_"]',
      "&:before": {
        "z-index": "2147483647",
      },
    },
  },
  plugins: [
    plugin(({ addUtilities }) => {
      const newUtilities = {
        ".word-wraping": {
          "text-align": "justify",
          "-webkit-hyphens": "auto",
          "-moz-hyphens": "auto",
          "-ms-hyphens": "auto",
          hyphens: "auto",
        },
        ".word-wrap-break": {
          "word-wrap": "break-word",
        },
        ".max-content": {
          width: "max-content",
        },
      };
      addUtilities(newUtilities);
    }),
    formsPlugin,
    typographyPlugin({
      dark: true,
    }),
  ],
});

Vite plugin

Add vite-plugin-windicss to vite.config.ts to create windicssPlugin().

// ...
import windicss from 'vite-plugin-windicss'

// https://vitejs.dev/config/
export const baseConfig = (entry: string): UserConfigExport => {
  // ...
})

export const windicssPlugin = () =>
  windicss({
    config: '../../windi.config.ts',
    scan: {
      dirs: ['.', '../views', '../components'],
      fileExtensions: ['blade.php', 'vue', 'ts'],
    },
  })

Import windicssPlugin in app resources/app/vite.config.ts.

// ...
import { windicssPlugin } from "../../vite.config";

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
    windicssPlugin(),
  ],
});