Laravel alpine.js + tailwindcss + livewre のインストール
Alpine.js Tailwindcss のインストール Laravel Mix の記述 resources/js/app.js resurces/sass/app/scss tailwindcssコマンドを実行 tailwind.config.js を修正 コマンドを実行 こんな感じで...できて...成功しました
GGAMI
Alpine.js Tailwindcss のインストール Laravel Mix の記述 resources/js/app.js resurces/sass/app/scss tailwindcssコマンドを実行 tailwind.config.js を修正 コマンドを実行 こんな感じで...できて...成功しました
yarn add alpinejs -D
yarn add tailwindcss -Dyarn add @ryangjchandler/spruce -D
yarn add @tailwindcss/ui -D
yarn add @tailwindcss/custom-forms -DLaravel 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 inittailwind.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/livewireblade を修正
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>yarn add turbolinks -Dresources/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 がリリースされるそうですね..はあ...（開発したものは何もないのに ' _')