tailwind에 서버 관련하여 자유롭게 커스텀이 가능하다.몇가지만 해보자.아래 serve안에 --port=8090는 포트번호가 기본적인 5500번을 사용하게 되는데 그 번호를 8090으로 변경하고--browser=safari 는 기본 브라우저 설정을 사파리로 설정하는 것이다. 다른 브라우저로 설정이 가능하다.--host=localhost의 경우는 서버를 로컬환경에서 실행하는 것이다.{ "scripts": { "start": "run-p watch serve", "dev": "tailwindcss -i ./src/styles/input.css -o ./src/styles/main.css", "watch": "npm run dev -- --watch", "serve": "live-s..

1. 새로고침 및 수정사항 반영npm run dev혹은 watch라는 모드가 있다.npm run dev는 1회성으로 수정 사항에 대해 그 순간 새로고침이 되어 반영이 되게 만드는 것이다.근데 watch는 저장을 할 때마다, 수정한 사항에 대해 계속 반영이 될 수 있도록 하는 것이다.아래와 같이 pakage.json 파일에 입력을 하면 된다.그래서 만약에 파일명을 수정하게 된다면 dev 값만 수정을 하게 되면 아래 watch도 같이 수정된다.터미널에1. 상시 업데이트 : npm run watch 라고 입력하면 된다.2. 일회성으로 하고 싶다면 npm run dev 이다.{ "scripts": { "dev": "tailwindcss -i ./src/styles/input.css -o ./src/sty..

테일윈드를 사용할 때 계속 변경을 할 때마다 아래 명령어를 입력해야했다. 하지만 이를 쉽게 할 수 있는 방법이 있다.npx tailwindcss -i ./src/input.css -o ./src/output.css --watch 파일 경로 중에package.json 파일에 들어가서 처음에는 아래와 같다.{ "devDependencies": { "tailwindcss": "^3.4.10" }} 그리고 아래와 같이 고쳐본다. 역시 파일경로와 파일명을 잘 확인해본다.{ "scripts": { "dev": "npx tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css" }, "devDependencies": { "tailw..

여기서 초기세팅할 때 공식문서가서 하자. https://tailwindcss.com/docs/installation1. tailwind 초기세팅 처음 위와 같은 방식으로 세팅한다.1. npm install -D tailwindcss노트 패키지 매니저로 tailwindcss 패키지를 설치하는 것이다. 2. npx tailwindcss init이는 tailwindcss로 초기화위와 같이 파일 경로에 이러하게 생긴다. 2. 초기 경로 설정/** @type {import('tailwindcss').Config} */module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [],}위 코드를 tailwin..