Level 58
To get started with Laravel, Tailwind, and HeadlessUI without using Vue for anything other than loading HeadlessUI components, follow these steps:
- Install Laravel using the command
composer create-project laravel/laravel project-name. - Install Laravel Breeze for authentication using the command
composer require laravel/breeze --devand runphp artisan breeze:installto install it. - Install TailwindCSS, Autoprefixer, and PostCSS using the command
npm install -D tailwindcss autoprefixer postcss. - Create a
tailwind.config.jsfile in the root directory of your project and add the following code:
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
}
- Install HeadlessUI and Heroicons using the commands
npm install @headlessui/vue@latestandnpm install @heroicons/vue. - In your
app.blade.phpfile, add the following code to the head section:
<head>
<!-- Other head tags -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
@yield('head')
</head>
- In your
app.scssfile, add the following code:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
- In your
app.jsfile, add the following code:
import { createApp } from 'vue';
import { Headlessui } from '@headlessui/vue';
import { HeroIcon } from '@heroicons/vue';
const app = createApp({});
app.component('Headlessui', Headlessui);
app.component('HeroIcon', HeroIcon);
app.mount('#app');
- In your
webpack.mix.jsfile, add the following code:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.vue()
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]);
- Run the command
npm run devto compile your assets.
With these steps, you should be able to use TailwindCSS and HeadlessUI components in your Laravel project without using Vue for anything other than loading the components.
