잡설

tailwind 4.0 alpha 출시기념 되돌아 보는 느낌으로 tailwind 설정을 공유 합니다.

나름 규모 있는건 next 로 만들지만 빠르게 찍어낼 땐 아직 express + pug 조합이 더 좋다 느껴지네요 :)

---

setup tailwind

의존성 설치

# express + pug + i18n + tailwindcss
npm install tailwindcss postcss autoprefixer postcss-cli body-parser cookie-parser debug dotenv express express-session http-errors i18next i18next-fs-backend i18next-http-middleware memorystore moment morgan postcss postcss-cli pug tailwindcss

초기화

npx tailwindcss init
touch postcss.config.js

postcss.config.js 작성

/postcss.config.js

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

tailwind.css 작성

mkdir public
mkdir public/styles
touch public/styles/tailwind.css
touch public/styles/style.css

public/styles/tailwind.css

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

package.json 수정

package.json

{
  "scripts": {
    "build:css": "postcss public/styles/tailwind.css -o public/styles/style.css"
  }
}

npm run build:css

위 내용을 실행하면 public/styles/tailwind.css 파일을 참조하여 public/styles/style.css 파일을 생성한다

참조링크

• how-to-use-tailwindcss-with-node-js-express-and-pug