Web/Tailwind(CSS)

[Tailwind] 설치 및 초기 설정

devsalix 2022. 12. 13. 14:16
728x90

Tailwind 공홈의 주소는 아래를 참조하세요

 

https://tailwindcss.com/

 

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Documentation for the Tailwind CSS framework.

tailwindcss.com

 

초기 설치와 세팅 부분에서 헷갈리는 부분이 존재하여 참고를 위해 글을 작성해 봅니다

 

파일 구조는

  • [파일] index.js
  • [폴더] public
    • [폴더] css
      • [파일] style.css 
    • [파일] index.html
    • [파일] error.html

상위 폴더 index.js 파일의 경우 이전 작성한 포스팅을 참고하면 됩니다

 

https://devsalix.tistory.com/47

 

[Node.js] 웹 서버 구현

우선 웹 서버 구조는 아래와 같이 구성하고 [파일] index.js [폴더] public [파일] index.html [파일] error.html 그리고 웹 서버를 구현하기 위해서는 express 모듈과 ejs 뷰 엔진이 필요하다 VS Code 에서 새 터미

devsalix.tistory.com

 

우선 Tailwindcss를 설치를 진행합니다

 

> npm install tailwindcss

 

npm을 통해 tailwindcss 를 설치 진행 후

 

node.js의 추가 패키지 npx를 설치 진행합니다

 

> npm install npx

 

npx은 npm의 추가 도구로써 특정 패키지의 필수 파일들을 간단히 설치하게끔 도와주는

 

기능을 가지고 있습니다

 

https://www.npmjs.com/package/npx

 

npx

execute npm package binaries. Latest version: 10.2.2, last published: 3 years ago. Start using npx in your project by running `npm i npx`. There are 120 other projects in the npm registry using npx.

www.npmjs.com

 

설치가 완료되면

 

> npx tailwindcss init

 

위의 명령어로 tailwindcss 초기화를 진행해 줍니다

 

그럼 상위 폴더에 tailwind.config.js 파일이 생성됩니다

 

 

 

해당 파일을 아래와 같이 작성해 줍니다

 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

이후 상위 폴더 하위 public 폴더 하위 css 폴더에 있는 style.css 파일에 아래와 같이 작성해 줍니다

 

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

 

우선 기본 터미널에 기존 node index.js 로 index.js를 실행을 시켜 두고

 

분할 터미널을 통해 아래와 같이 명령어를 실행합니다

 

> npx tailwindcss -i ./public/css/style.css -o ./public/css/tailwind.css --watch

 

이렇게 진행하게 되면 상위 폴더 하위 public 폴더 하위 css 폴더에 tailwind.css 란 파일이 생기면서

 

실시간 스타일 반영이 적용되기 시작합니다

 

간단한 html 예로

 

<!DOCTYPE html>
<html lang="ko-kr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TailwindCSS 테스트</title>
    <link rel="stylesheet" href="./css/tailwind.css">
</head>
<body>
	<div class="flex items-center bg-red-200">
		<a class="m-5 mt-5 p-3 text-blue-500">TailwindCSS 테스트</a>
	</div>
</body>
</html>

 

이와 같이 작성 후 저장하면 자동으로 스타일이 적용되어

 

 

아래와 같이 적용되는 것을 볼 수 있습니다

 

728x90
반응형