실시간TAG
#엔비디아 #AMD #AI #서린씨앤아이
공지
이벤트
특집/기획
뉴스/정보
커뮤니티
질문/토론
빌런크루
빌런포럼
장터/핫딜
브랜드로그
운영공지 이용가이드
이벤트 체험단 모집 특가 이벤트 당첨/발표
리뷰
CPU/MB VGA 메모리/스토리지 케이스/파워/쿨러 노트북/PC 가전/음향 공유기/주변기기 키보드/마우스 가젯 (gadget)
취재현장
컴퓨텍스 지스타 일러스타페스 기자간담회 B컷 인터뷰 영상 수컷학개론 라떼는 르포/기획 사건/사고 지름신 데스크테리어 18+
기술
가전 모바일 컴퓨터 전자부품 카메라 과학 인공지능 블록체인 반도체 보안
산업
건설 부동산 에너지 제조 항공우주 유통
문화/연예
공연 예술 방송 영화 출판 음악
생활
가구 결혼 미용 반려동물 쇼핑 주류 여행
건강
의료 제약 병원 식품
금융/경제
창업 노동 프랜차이즈 보험/연금 암호화폐 금융/은행 사회 게임 스포츠 레트로 자동차
18+뉴스
상품/홍보
자유게시판
출석/가입 일상/생활 이슈/논란 여행/맛집 상품/홍보 취미/교양
유머게시판
유머 감동
리뷰/사용기
그래픽카드 시피유/메인보드 디스플레이 전원공급장치 메모리/스토리지 케이스/쿨링 키보드/마우스 기타 주변기기 노트북/PC 팁/강좌 구매/체험 모바일/스마트폰
갤러리
데스크셋업 DIY/튜닝 일상/여행/맛집 행사/축제 버그/건의
18+게시판
AI이미지 후방/은꼴 연예인 인플루언서/BJ 성인정보 18+질문
질문/답변
일반/상식 조립/견적 쇼핑/장소 휴대폰구매 인터넷신청 법률/전문지식 고민상담
토론
설문조사 주제토론
H/W포럼
PC/노트북 모바일/태블릿 TV/음향 영상/카메라 생활/주방가전
게임포럼
온라인게임 PC게임 콘솔게임 모바일게임 e스포츠/대회
투자포럼
주식 부동산 전자화폐
스포츠포럼
축구 야구 이종격투기 기타 스포츠
컬쳐포럼
영화 드라마 애니 만화/웹툰 문학/소설 공연
여행포럼
국내여행 해외여행 캠핑/아웃도어 축제/행사
개발포럼
개발뉴스 개발 팁/강좌
18+포럼
전자담배 성인용품 캣파이트 도색잡지
핫딜정보
PC/가전핫딜 게임/SW핫딜 취미용품핫딜 기타핫딜 인터넷가입 휴대폰특가
중고장터
팝니다 삽니다 무료나눔
공지
이벤트
특집/기획
18+
뉴스/정보
커뮤니티
질문/토론
빌런크루
빌런포럼
장터/핫딜
브랜드로그
빌런 TOP 20
일간 l 주간 l 월간
1
[컴퓨터] 서린씨앤아이, 리안리 커브드 OLED 디스플레이 적용 수랭 쿨러 하이드로시프트 II 시리즈 출시
2
[인공지능] 엔비디아, 에이전트 툴킷으로 DGX 스테이션에서 개인용 AI 에이전트 간소화
3
[모바일] 삼성전자, 갤럭시 Z 폴드8 울트라·폴드8·플립8 등 폴더블 3종 라인업으로 확대
4
[이슈/논란] 구독형은 이제 끝?
5
[수컷학개론] 연기 없다고 안전한가, 전자담배가 남긴 폐 손상 신호
6
[후방/은꼴] 기래민 돌핀팬츠
7
[음악] 킹넷, ‘열혈강호: 넥스트’ 두 번째 OST에 송가인 참여… 29일 게임 출시와 함께 음원 공개
8
[카메라] 니콘이미징코리아, 전시회 기획부터 포트폴리오 제작까지… 8월 니콘스쿨 커리큘럼 공개
9
[일상/생활] 일본 버블 온천 폐허, 부곡하와이 부활 기대
10
[컴퓨터] 이엠텍, AI 인프라 시장 겨냥 '레드빗 4U 서버 케이스 3종' 최신 CPU 쿨러 호환성 데이터 공개
11
[컴퓨터] 서린컴퓨터, 리안리 A3 데스크테리어 미니 PC 2종 출시
12
[일상/생활] 40대 전기기능사 실기 합격기
13
[모바일] 케이스티파이, 갤럭시 Z8 시리즈 케이스 라인업 공개
14
[이슈/논란] 미국이 그린란드를 먹으려는 이유는?
15
[모바일] 한발 앞서 만나보는 차세대 폴더블, 새로운 갤럭시 Z 시리즈
16
[일상/생활] 시험 중 휴대폰 영장 요구, 로스쿨생 실망
17
[일상/생활] 우리나라 오래된 빵집 20곳 정리
18
[일상/생활] 딸 위해 햄버거 사준 70대 엄마
19
[후방/은꼴] 심심해서 후방
20
[일상/생활] K-빙수, 실리콘밸리까지 정복하다
1
[컴퓨터] 마이크로소프트, 차세대 AMD 인스팅트 및 AMD 에픽 프로세서 도입
2
[메모리/스토리지] ADATA DDR5-6000 CL30 ARMAX RGB 패키지 파인인포 32GB [써보니]
3
[축구] 드디어 성사된 역대 최고의 라이벌전 '잉글랜드-아르헨티나' 4강 격돌
4
[일상/생활] 코스피 바닥 신호들이 슬슬 보이는 중
5
[일상/생활] 다나와 히트브랜드 오프라인 팝업 행사
6
[개발뉴스] Cloudera·VAST Data, 어디서나 구축 가능한 AI 데이터 플랫폼 위해 전략적 제휴
7
[사건/사고] MSI 유상 수리 논란… CPU 소켓 수리 된 메인보드도 재차 고장
8
[모바일] 삼성전자, 갤럭시 Z 폴드8 울트라·폴드8·플립8 등 폴더블 3종 라인업으로 확대
9
[일상/생활] 고양이 품종별 지능 순위
10
[공연 예술] ‘2026 국립극장 시네마 투어’ 개최
11
[컴퓨터] 코잇, ASUS GeForce RTX 그래픽카드 국내 공식 유통 확대
12
[카메라] 니콘이미징코리아, 전시회 기획부터 포트폴리오 제작까지… 8월 니콘스쿨 커리큘럼 공개
13
[컴퓨터] 서린씨앤아이, 리안리 커브드 OLED 디스플레이 적용 수랭 쿨러 하이드로시프트 II 시리즈 출시
14
[일상/생활] 딸이 사온 고기, 엄마는 다이어트라 거절
15
[연예인] 모델 심유이 시원한 비키니 공개
16
[공연 예술] 희망제작소·카카오, ‘대한민국 사회혁신 컨퍼런스 2026’ 개최
17
[일상/생활] 온라인 전용 여포 과자 등장
18
[일상/생활] 특수부대 17년 베테랑 몸상태
19
[일상/생활] 서울 하천, 변신과 회복의 두 얼굴
20
[일상/생활] LH 청년임대 퀄리티, 급이 나뉘는 수준
1
[컴퓨텍스] [컴퓨텍스 2026] 패트리어트 X 파인인포, DDR5·PCIe Gen5 SSD 앞세워 AI 인프라 시장 겨냥
2
[이슈/논란] MissAV, 저작권 침해 소송에 직면: 사건 경위 및 성인 스트리밍 업계에 미치는 영향
3
[컴퓨텍스] [컴퓨텍스 2026] PCCOOLER X 얼티메이크, 발열 제어를 고성능 시스템의 기준까지
4
[B컷] 앱코 UD51L 엑시드 LCD 강화유리 ARGB BTF 케이스 [B컷]
5
[컴퓨터] 이엠텍, “무더운 여름 시원하게” 고객지원센터 방문객에게 아이스크림 및 캐릭터 부채 증정
6
[일상/생활] 스파이더맨 손 꼽은 명장면 모음
7
[일상/생활] 주식 시장 급락에 충격받는 투자자들
8
[일상/생활] 산에서 구조된 고양이, 이제는 무지개 뒤로
9
[일상/생활] 일본인 한국 두부 먹는 모습
10
[컴퓨터] 제이씨현시스템 '기가바이트 Radeon RX 9070 GRE Gaming OC D6 12GB' 출시
11
[일상/생활] 홍명보 편의점 출입금지 사연
12
[출석/가입] 이번달도 무사히 출석 완료
13
[일상/생활] 동네 보지 홍수
14
[일상/생활] 넷플릭스 야한 드라마 베스트
파인인포
전체 l 공지 l 이벤트 l 특집/기획 l 뉴스/정보 l 커뮤니티 l 질문/토론 l 빌런크루 l 빌런포럼 l 장터/핫딜 l 브랜드로그
[개발 팁/강좌] Spring boot에서 tailwindcss 사용하기
처음 글 올리네요. ㅎㅎ Spring boot에서 Tailwind CSS를 사용하고 싶어서 다음과 같은 방식을 고안하게 되었습니다. 저는 템플릿을 Thymeleaf(타임리프)를 좋아해서 이 기준으로 작성하겠습니다. Framework : String boot 4 Template : Thymeleaf(타임리프) CSS : Tailwind CSS 미리 Node.js 설치해 주세요. 우선 프로젝트 하나를 생성합니다. 그 다음 리소스를 생성합니다. 우선 index.html 을 다음과 같은 내용으로 생성합니다. 경로 : src/main/resources/template/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tailwind TEST</title> </head> <body> <div>Tailwind CSS</div> </body> </html> 그 다음 스타일 시트를 생성합니다. 우선 스타일시트 파일 확인용이라 아무 스타일이나 입력해주세요. 경로 : src/main/resources/static/css/default.css @charset "UTF-8"; html, body { height: 100%; place-items: center; place-self: center; place-content: center; } div { width: 10rem; height: 5rem; margin: 0 auto; background: lightcoral; border: 1px red solid; } 그럼 두 경로에 파일이 보이실 꺼에요. 그다음 index.html head에 다음 테그를 삽입해 주세요. <link rel="stylesheet" href="./../static/css/default.css"> 스타일이 적용되는지 확인합니다. 적용 확인이 되면 그다음 head에 다음 tag를 삽입해 주세요. <!-- Tailwind CSS dynamic Style CDN 스타일 완성후 삭제 --> <script src="https://unpkg.com/@tailwindcss/browser@4"></script> 개발자 모드를 활용해 실시간으로 스타일이 적용되는지 확인해주세요. 확정 된 스타일을 index.html파일에 적용합니다. 이런 식으로 스타일을 적용하여 완성된 스타일을 default.css로 빌드하여 적용해 보도록 하겠습니다. src랑 같은 위치에 node 경로를 생성해주세요. 그 다음 node안에 package.json 파일 생성 후 다음 내용을 입력해 주세요. { "dependencies": { "@tailwindcss/forms": "^0.5.6", "autoprefixer": "^10.4.16", "fs-extra": "^11.1.1", "heroicons": "^2.0.18", "postcss": "^8.4.31", "tailwindcss": "^3.3.3", "update-browserslist-db": "^1.2.3" } } 터미널에서 다음 명령을 실행하세요. npm install 빌드를 정상적으로 실행하기 위해 postcss 설정 파일을 생성합니다. node/postcss.config.js module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ] } 이제 node안에 css파일을 하나 생성합니다. node/default.css 아래의 내용을 추가합니다. @tailwind base; @tailwind components; html, body { @apply h-full place-items-center place-self-center place-content-center; } div { @apply w-[10rem] h-[5rem] mx-auto rounded shadow-lg shadow-black/15 bg-red-200 text-center place-content-center } 다음으로 할 작업은 nodejs 빌드 스크립트 추가입니다. 저는 node폴더에서 실행하는 기준으로 작성하겠습니다. 우선 빌드 대상은 node안에 있어야 함으로 node/tmpl 에 복사하고 빌드하도록 하겠습니다. 우선 node/tmpl 에 복사하는 스크립트를 작성하겠습니다. node/copy.js 파일을 생성합니다. const fsExtra = require('fs-extra'); console.log('Resource init!'); const sourceDirectory1 = './../src/main/resources/templates'; // 원본 디렉토리 경로 const targetDirectory1 = './tmpl/t'; // 대상 디렉토리 경로 console.log('Try copy '${sourceDirectory1}' -> ${targetDirectory1}'); fsExtra.copy(sourceDirectory1, targetDirectory1, err => { if (err) { console.error('Error copying directory:', err); } else { console.log('Directory copied successfully! 1'); } }); console.log('Finished : ${new Date().toISOString()}'); 그 다음 터미널에서 실행해 복사를 확인합니다. node copy.js index.html에서 <script src="https://unpkg.com/@tailwindcss/browser@4"></script> 를 삭제하고 정합니다. 다음은 tailwindcss 빌드 입니다. -i : 인풋 -o : 아웃풋 터미널에서 아래 명령을 실행헤 주세요. npx tailwindcss build -i default.css -o ../src/main/resources/static/css/default.css 그 다음 적용여부를 확인하면 완료입니다. 그리고 빌드를 쉽게 하기 위해 package.json의에 빌드 스크립트를 추가합니다. 빌드 대상 폴더 비우기 rm -rf tmpl 빌드 대상 복사 node copy.js tailwindcss 빌드 tailwindcss build -i default.css -c tailwind.config.js -o 압축버전 빌드 (공백 삭제 등 용량 최적화) --minify 추가 { "scripts": { "css": "rm -rf tmpl && node copy.js && tailwindcss build -i default.css -c tailwind.config.js -o ../src/main/resources/static/assets/v2/css/default.css", "css-min": "rm -rf tmpl && node copy.js && tailwindcss build --minify -i default.css -c tailwind.config.js -o ../src/main/resources/static/assets/v2/css/default.css" }, "dependencies": { "@tailwindcss/forms": "^0.5.6", "autoprefixer": "^10.4.16", "fs-extra": "^11.1.1", "heroicons": "^2.0.18", "postcss": "^8.4.31", "tailwindcss": "^3.3.3", "update-browserslist-db": "^1.2.3" } } 이렇게 하면 빌드 시 아래화 같이 커맨드를 입력하면 됩니다. 일반 : npm run css 압축 : npm run css-min gradle에서 빌드 시 위 내용을 자동 실행 하고 싶으면 build.gradle 다음 내용을 추가하면 됩니다. task nodePreBuild(type: Exec) { // node 폴더 위치를 절대 경로로 계산 workingDir = file("${projectDir}/node") // Windows와 Mac/Linux 호환성 처리 if (System.getProperty('os.name').toLowerCase().contains('windows')) { executable 'cmd' args '/c', 'npm', 'run', 'css' } else { executable 'sh' args '-c', 'npm run css' } // 3. 디버깅을 위한 출력 (Gradle 실행 시 콘솔에 찍힘) doFirst { println "--------- CSS Build Start ---------" println "Working Directory: ${workingDir}" println "Executable: ${executable}" println "Arguments: ${args}" println "-----------------------------------" } } processResources.dependsOn nodePreBuild 궁금하신건 댓글 달아주세요. Tailwind CSS 좋아하는데… 요즘 많이 힘들다고 하네요. 많이 응원해주세요. ㅎㅎ
2026.01.16
1
1
1
브랜드로그
0 / 0
AMD, 에이전틱 AI 시대를 위한 풀스택 컴퓨팅 포트폴리오 공개 AMD @amd 1일전
서린씨앤아이, 자사몰 서린익스프레스서 슈퍼 브랜드 위크 프렉탈디자인 최대 30% 할인 서린씨앤아이 @seorincni 1일전
마이크로닉스 ‘ASTRO II PT’ 구매 시 네이버페이 3만원 증정 마이크로닉스 @micronics 1일전
AMD와 앤트로픽, 인스팅트 MI450 시리즈 GPU 구축 위한 전략적 파트너십 발표 AMD @amd 1일전
인텔 공인대리점 3사, 인텔 정품 CPU ‘AI와 함께 발전하는 시대’ 프로모션 Intel @intel 1일전
인사이
  • 종합
  • 뉴스/정보
  • 커뮤니티
  • 질문/토론
TOP1 [컴퓨터] 서린씨앤아이, 리안리 커브드 OLED 디스플레이 적용 수랭 쿨러 하이드로시프트 II 시리즈 출시
TOP2 [인공지능] 엔비디아, 에이전트 툴킷으로 DGX 스테이션에서 개인용 AI 에이전트 간소화
TOP3 [모바일] 삼성전자, 갤럭시 Z 폴드8 울트라·폴드8·플립8 등 폴더블 3종 라인업으로 확대
TOP4 [이슈/논란] 구독형은 이제 끝?
TOP5 [후방/은꼴] 기래민 돌핀팬츠
TOP6 [음악] 킹넷, ‘열혈강호: 넥스트’ 두 번째 OST에 송가인 참여… 29일 게임 출시와 함께 음원 공개
TOP7 [카메라] 니콘이미징코리아, 전시회 기획부터 포트폴리오 제작까지… 8월 니콘스쿨 커리큘럼 공개
TOP8 [일상/생활] 일본 버블 온천 폐허, 부곡하와이 부활 기대
TOP9 [일상/생활] 40대 전기기능사 실기 합격기
TOP10 [모바일] 케이스티파이, 갤럭시 Z8 시리즈 케이스 라인업 공개
TOP1 [컴퓨터] 서린씨앤아이, 리안리 커브드 OLED 디스플레이 적용 수랭 쿨러 하이드로시프트 II 시리즈 출시
TOP2 [인공지능] 엔비디아, 에이전트 툴킷으로 DGX 스테이션에서 개인용 AI 에이전트 간소화
TOP3 [모바일] 삼성전자, 갤럭시 Z 폴드8 울트라·폴드8·플립8 등 폴더블 3종 라인업으로 확대
TOP4 [음악] 킹넷, ‘열혈강호: 넥스트’ 두 번째 OST에 송가인 참여… 29일 게임 출시와 함께 음원 공개
TOP5 [카메라] 니콘이미징코리아, 전시회 기획부터 포트폴리오 제작까지… 8월 니콘스쿨 커리큘럼 공개
TOP6 [모바일] 케이스티파이, 갤럭시 Z8 시리즈 케이스 라인업 공개
TOP7 [컴퓨터] 이엠텍, AI 인프라 시장 겨냥 '레드빗 4U 서버 케이스 3종' 최신 CPU 쿨러 호환성 데이터 공개
TOP8 [컴퓨터] 서린컴퓨터, 리안리 A3 데스크테리어 미니 PC 2종 출시
TOP9 [모바일] 한발 앞서 만나보는 차세대 폴더블, 새로운 갤럭시 Z 시리즈
TOP10 [쇼핑] 타이베이·홍콩·서울 3개 도시서 개최하는 첫 번째 월드 투어 ‘긱스 룰 월드 투어 크리에이티드 바이 파르코’
TOP1 [이슈/논란] 구독형은 이제 끝?
TOP2 [후방/은꼴] 기래민 돌핀팬츠
TOP3 [일상/생활] 일본 버블 온천 폐허, 부곡하와이 부활 기대
TOP4 [일상/생활] 40대 전기기능사 실기 합격기
TOP5 [이슈/논란] 미국이 그린란드를 먹으려는 이유는?
TOP6 [일상/생활] 시험 중 휴대폰 영장 요구, 로스쿨생 실망
TOP7 [일상/생활] 우리나라 오래된 빵집 20곳 정리
TOP8 [일상/생활] 딸 위해 햄버거 사준 70대 엄마
TOP9 [후방/은꼴] 심심해서 후방
TOP10 [일상/생활] K-빙수, 실리콘밸리까지 정복하다
TOP1 [쇼핑/장소] 여러분은 어떤 독(DOCK)을 선호 하시나요?
TOP2 [설문조사] [빌런 설문조사] 가장 가지고 싶은 30만원 이하 27인치 QHD 게이밍 모니터는?
TOP3 [질문/토론] 빌런사이트 수익구조는 어떻게 이루어지는지 궁금
TOP4 [주제토론] 국립 공원이 잔반통을 없앤다고 합니다
TOP5 [쇼핑/장소] 음감용 헤드셋, 이어폰 추천 좀 굽신굽신
TOP6 [주제토론] 원망스럽도다... 동양 귀신 VS 서양 귀신
TOP7 [조립/견적] 스팀 머신 가격은 얼마나 될까요?
TOP8 [주제토론] 여러분의 첫 휴대폰은 뭐였나요?
인사이
빌런
빌런18+ 소개 이용약관 개인정보처리방침 광고 및 제휴문의
커뮤니티 빌런 18+ ( Villain ) Beta 2.0
본사 l 서울 금천구 가산디지털1로 33-33 대륭테크노타운2차 7층 705-5호
운영 l 경기도 고양시 덕양구 동축로 70 현대프리미어캠퍼스5층 B동 A5-48
대표전화 l 010-4588-4581 서비스 시작일 l 2025-08-15 전자우편 l master@villain.city
커뮤니티 빌런 18+ ( Villain ) 의 모든 콘텐츠(영상,기사, 사진)는 출처를 표기하는 조건으로 무단 전재와 복사, 배포 등을 허용합니다.
Copyright © 커뮤니티 빌런 18+ ( Villain ) All Rights Reserved.