- 먼저 tailwind를 설치
npm install -D tailwindcss- tailwind.config.js 파일을 생성한다.
npx tailwindcss init- tailwind.config.js 파일에 Tailwind CSS를 사용할 템플릿들이 존재하는 경로를 적어준다.
tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};
- 최상위 혹은 글로벌 css파일에
@tailwind지시어들 추가
/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;- 터미널에서
npm run dev하면 dist폴더에 output.css 가 생성됩니다.
package.json
"scripts": {
"start": "nodemon index.js --exec babel-node",
"dev": "npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch"
},- HTML의
<head>에 컴파일된 Tailwind CSS 파일 추가, 스타일링 코드 작성
~/views/home/home.html
...
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/output.css" rel="stylesheet" />
</head>
...
<body>
<div
class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4"
>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-slate-500">You have a new message!</p>
</div>
</div>
</body>dist폴더에 있는 output.css를 사용하고자 하는 html파일에 이렇게 넣어줍니다.
/dist를 작성하지 않는 이유는 Express에서 미들웨어 처리를 해줬기 때문.
아래부터는 Node.js와 Express를 사용할 때 MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled 에러 해결방법
src/app.js
...
const app = express();
// output.css 사용하기 위함
app.use(express.static('dist'));
...express를 사용할 때 위에처럼 넣어준다.
위 코드는 Express프레임워크 사용해서 정적 파일을 제공하기 위한 코드이다.
인자로 정적 파일의 경로를 받고 위 코드에서는 'dist'라는 폴더의 경로를 전달하는 것이다.
즉 dist폴더에 있는 파일을 정적 파일로 서비스하기 위해 express.static()미들웨어 함수를 추가한 것이다.
이렇게 하면 클라이언트에서 '/'URL로 요청이 들어오면 dist폴더에서 해당 파일을 찾아서 응답하게 된다.
성공 = 무한도전 + 무한실패