PHP 프로젝트에 tailwindcss 설치하기

참고사이트

1. https://www.5balloons.info/getting-started-with-tailwindcss-on-laravel/
2. https://laravel.kr/docs/7.x/mix#running-mix

이거 디게 어려웠다.┗|｀O′|┛

웹상에는 라라벨 믹스를 이용해 설치하는 예제들 밖에 없고, 일반 PHP 프로젝트로의 방법은 CDN을 이용하는 방법 밖에는 없는데 이 CDN을 이용한 방법은 모든 기능을 다 사용할 수 없다고 한다. 그래서 일반 PHP 프로젝트에 사용하기 위해 꼭 설치해 보겠다는 오기로 시작했다.

실패한 건 다 넘기고 성공기만 적어둠

1번 사이트를 보고 실행해보니 npm run dev 에서 에러가 나더라.😫

이유가 laravel-mix 가 없어서 그런거 같았음‼

그래서 생각한게 라라벨 설치하면 저게 생기겠지하고 라라벨을 설치함.

설치 후 성공(실행순서가 막 뒤바뀌어 있어서 아래 순서가 정확한지도 모르겠음.ㅠㅠ)

2020-04-09 기준 - 구글(90%), 네이버(10%) 번역기 이용

라라벨 설치

laravel 에 있는 package.json 파일 복사해서 일반 PHP 프로젝트 root에 package.json 생성(Copy the package.json file in the laravel to create package.json in the my PHP project root.)

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0"
    }
}

npm 관련 파일 설치(npm install)

npm install
npm install tailwindcss

여기까지하고 소스를 보면 제일 마지막에 tailwindcss 가 추가되어 있어야 한다.(Confirmation step. Looking at the package.json file (source), tailwindcss are appended to the end.)

...whatever...

"sass-loader": "^8.0.0",
"tailwindcss": "^1.2.0"

...whatever...

프로젝트 root에 resources/css/tailwindcss.css 파일 생성하고 아래 내용 적고 저장(Create a resources/css/tailwindcss.css file in your project root and write below and save it.)

@tailwind base;
@tailwind components;
@tailwind utilities;

프로젝트 root에 webpack.mix.js 파일 생성하고 아래 내용 적고 저장(Create a webpack.mix.js file in your project root and write below and save it.)

단 뒤에 나오는 public/common/css 의 경로는 자신의 웹 도큐먼트 루트쪽 css 파일을 생성하고 싶은 디렉토리를 지정해야 함.(However, the following public/common/css path should point to the directory where you will create the css file in the root of your web document.)

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

mix.postCss('resources/css/tailwindcss.css', 'public/common/css', [
  require('tailwindcss'),
]);

npx tailwind init

위 명령어를 실행하면 프로젝트 root에 tailwind.config.js 파일이 생성되어야 함.(After executing the above command, tailwind.config.js file should be created in the project root.)

다시 한 번(Once again)

npm install
npm run dev

실행하면(Execution)

DONE  Compiled successfully in 9945ms                                                                  10:40:37 PM

                            Asset      Size  Chunks             Chunk Names
public/common/css/tailwindcss.css  1.04 MiB     mix  [emitted]  mix

위 처럼 뜨면 public/common/css 디렉토리에 tailwindcss.css 파일이 생성됨(The tailwindcss.css file is created in the public/common/css directory with the above message shown.)

이제 뷰 파일에 link 태그로 적용해 보자.(Now, let's apply it as a link tag to the view file.)

<link rel="stylesheet" href="/common/css/tailwindcss.css">

잘 된다..😂(It works well...)