Cordova Android 앱에 Tailwind CSS를 설정하는 방법을 단계별로 설명해드릴게요.
1. Tailwind CSS 설치
먼저, Cordova 프로젝트의 www 디렉터리에서 Tailwind CSS를 설치해야 합니다.
(1) 프로젝트 루트로 이동
cd your-cordova-project
(2) Tailwind CSS 설치
npm install -D tailwindcss postcss autoprefixer
2. Tailwind 설정 파일 생성
다음 명령어를 실행하면 tailwind.config.js 파일이 생성됩니다.
npx tailwindcss init
3. Tailwind 설정 파일 수정
tailwind.config.js 파일을 열어서 content 옵션을 수정합니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./www/**/*.html", // Cordova의 기본 HTML 파일 경로
"./www/**/*.js", // JavaScript 파일에서 Tailwind 클래스 사용 가능
],
theme: {
extend: {},
},
plugins: [],
};
4. Tailwind CSS 빌드 및 적용
Tailwind 스타일을 사용할 www/css/tailwind.css 파일을 생성합니다.
(1) www/css/tailwind.css 파일 만들기
@tailwind base;
@tailwind components;
@tailwind utilities;
(2) Tailwind CSS 빌드
아래 명령어를 실행하면 Tailwind CSS가 www/css/output.css로 빌드됩니다.
npx tailwindcss -i ./www/css/tailwind.css -o ./www/css/output.css --watch
5. HTML 파일에 Tailwind 적용
이제 www/index.html에 Tailwind CSS를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cordova Tailwind App</title>
<link rel="stylesheet" href="css/output.css">
</head>
<body class="bg-gray-100 text-center">
<h1 class="text-3xl font-bold text-blue-500 mt-10">Hello, Cordova with Tailwind!</h1>
</body>
</html>
6. Cordova 빌드 및 실행
이제 Cordova 앱을 빌드하고 실행합니다.
cordova build android
cordova run android
이제 Tailwind CSS가 적용된 Cordova 앱이 정상적으로 실행될 것입니다!
카테고리 없음
댓글