Laravel alpine.js + tailwindcss + livewre 설치하기
Updated on
![Laravel alpine.js + tailwindcss + livewre 설치하기](https://ggami.net/storage/media/108/conversions/141414141414-webp-small.webp)
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
이렇게… 되고.. 성공 함..
Livewire + turbolinks 설치
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 이 출시된다고 하네요.. 허어… (개발한건 하나도 없는데 ’ _’)