Laravel Mix 에 Tailwindcss 설치하기
Laravel Mix로 TailwindCSS와 Alpine.js를 설치하는 간단한 방법을 정리했어요. 빠르게 설정하고 싶다면 이 글을 확인해보세요!
GGAMI
Laravel Mix로 TailwindCSS와 Alpine.js를 설치하는 간단한 방법을 정리했어요. 빠르게 설정하고 싶다면 이 글을 확인해보세요!
후우... 도대체 이거 왜 작성하는지 모르겠지만, Nuxt.js 로 프론트 안하고, Laravel로만 작업할때에는, Mix를 사용하여야하는데, 여러번 작업하게 될 것 같아서, 여기에 정리하며 작성해서 계속 열어봐야겠다.
yarn add tailwindcss --dev
yarn add @tailwindcss/ui --devnpx tailwindcss initapp.scss 파일에 해당 내용 추가
@tailwind base;
@tailwind components;
@tailwind utilities;webpack.mix.js 파일에 해당 내용 수정
const tailwindcss = require('tailwindcss')
mix.js('resources/js/app.js', 'public/js');
mix.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [
tailwindcss('./tailwind.config.js')
],
});yarn run prod이렇게 하면, public/css/app.css에 tailwindcss 가 추가된다.
와... 이거 Laravel Mix 사용 안한지도... 거의 1년인거 같다.. (그냥 작업 자체를 안한거지 뭐...)
근데, 앞으로 뭐 몇개 작업할거에서, Nuxt.js를 모두 작업하기에는 무리가 있고, 간단한 것들은 그냥 Laravel에서 모두 처리할거라, 다시 Mix를 사용할 예정이다.
끝.
결제했던거 그냥 사용해봄...
... 사실 페이지 필요 없는데... 그냥 작업해봤다.. 다음 작업때, 조금 더 자세한 내용 다루면 좋겠음.
yarn add alpinejs --devapp.js
require('./bootstrap');
import 'alpinejs'