Laravel alpine.js + tailwindcss + livewre 설치하기

Updated on

Laravel alpine.js + tailwindcss + livewre 설치하기

Alpine.js Tailwindcss 설치

yarn add alpinejs -D

yarn add tailwindcss -D

yarn add @ryangjchandler/spruce -D

yarn add @tailwindcss/ui -D
yarn add @tailwindcss/custom-forms -D

Laravel Mix 작성

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js("resources/js/app.js", "public/js/app.js")
    .sass("resources/sass/app.scss", "public/css/app.css")
    .options({
        processCssUrls: false,
        postCss: [
            tailwindcss('./tailwind.config.js')
        ],
    })
    .sourceMaps();

if (mix.inProduction()) {
    mix.version();
}

resources/js/app.js

require('./bootstrap');

import 'alpinejs'

resurces/sass/app/scss

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://unpkg.com/tailwindcss/dist/base.css
 */
@tailwind base;

/**
 * Remove the default box-shadow for invalid elements to prevent
 * inputs in Livewire components showing with a
 * red border by default in Firefox.
 *
 * See: https://github.com/laravel-frontend-presets/tall/issues/7
 */
input:invalid, textarea:invalid, select:invalid {
    box-shadow: none;
}

/**
 * This injects any component classes registered by plugins.
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 */

tailwindcss 명령어 실행

npx tailwindcss init

tailwind.config.js 수정

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {},
    purge: {
        content: [
            './app/**/*.php',
            './resources/**/*.html',
            './resources/**/*.js',
            './resources/**/*.jsx',
            './resources/**/*.ts',
            './resources/**/*.tsx',
            './resources/**/*.php',
            './resources/**/*.vue',
            './resources/**/*.twig',
        ],
        options: {
            defaultExtractor: (content) => content.match(/[\w-/.:]+(?<!:)/g) || [],
            whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
        },
    },
    plugins: [
        require('@tailwindcss/custom-forms'),
        require('@tailwindcss/ui'),
    ],
};

명령어 실행

yarn dev

이렇게… 되고.. 성공 함..

composer require livewire/livewire

blade 수정

...
    @livewireStyles
</head>
<body>
    ...

    @livewireScripts
</body>
</html>

yarn add turbolinks -D

resources/js/app.js 수정

require('./bootstrap');

import 'alpinejs'

var Turbolinks = require("turbolinks")
Turbolinks.start()

alpine.js 에서 x-show 문제가 발생하는데.. 이 부분은

https://github.com/alpinejs/alpine#x-cloak

x-cloak 으로 해결할 수 있다.

https://dev.to/hus_hmd/alpine-js-responsive-x-cloak-3blp

하지만, 추가적으로 alpine.js + turbolinks 를 사용하면, x-show 캐싱문제가 발생하는데… 이 부분에 대해서는 추 후에 작성하겠습니다.

https://github.com/alpinejs/alpine-turbolinks-adapter

처럼, alpine turblinks의 어댑터 또한 작업중입니다…. 참고 참고…

Vue 3 그리고 Nuxt 3 은 언제쯤 출시일지.. 벌써 시간이 흘러서 Laravel 8 이 출시된다고 하네요.. 허어… (개발한건 하나도 없는데 ’ _’)

다른 글