Laravel Mix 에 Tailwindcss 설치하기

목차:

• Alpine.js 추가..

후우… 도대체 이거 왜 작성하는지 모르겠지만, Nuxt.js 로 프론트 안하고, Laravel로만 작업할때에는, Mix를 사용하여야하는데, 여러번 작업하게 될 것 같아서, 여기에 정리하며 작성해서 계속 열어봐야겠다.

yarn add tailwindcss --dev
yarn add @tailwindcss/ui --dev

npx tailwindcss init

app.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를 사용할 예정이다.

끝.

결제했던거 그냥 사용해봄…

… 사실 페이지 필요 없는데… 그냥 작업해봤다.. 다음 작업때, 조금 더 자세한 내용 다루면 좋겠음.

Alpine.js 추가..

yarn add alpinejs --dev

app.js

require('./bootstrap');

import 'alpinejs'