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

Check Tailwind CSS: TypeScript if you want TypeScript with Tailwind CSS below v3.1.

/** @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()
],
})