Tailwindcss Install
최근 작업한 홈페이지들은 전부 Tailwindcss를 사용하여 만들고 있습니다. tailwindcss를 사용하면 제각기 다른 프론트 개발자가 작업을 하더라도 최대한 통일성을 유지 할 수 있고, 간격이나 사이즈를 통일시킬 수 있기에 채용하게 되었습니다.
그럼 일단 설치부터 사이트의 적용까지 한번 알아보도록 하겠습니다.
설치하기
tailwindcss를 설치는 npm을 통해 설치 하면된다. 먼저 프로젝트 폴더안에
npm init -y
명령어를 통해서 package.json 을 생성하고
npm install -D tailwindcss
tailwindcss 를 받아 설치 합니다.
css파일을 하나 생성해서
@tailwind base; @tailwind components; @tailwind utilities; //라이믹스 게시판 에서 제목 태그 스타일 @layer base { .rhymix_content p { @apply leading-6; @apply mb-3; } .rhymix_content h1 { @apply text-4xl; @apply font-semibold; @apply text-gray-900; @apply dark:text-white; @apply leading-10; @apply mb-8; @apply mt-5; } .rhymix_content h2 { @apply text-2xl; @apply font-semibold; @apply text-gray-900; @apply dark:text-white; @apply leading-9; @apply mb-6; @apply mt-4; } .rhymix_content h3 { @apply text-xl; @apply font-semibold; @apply text-gray-900; @apply dark:text-white; @apply leading-8; @apply mb-5; @apply mt-3; } }
으로 넣어주시고
그리고 tailwindcss의 여러가지 기능과 커스텀을 위해서 구성파일을 생성하는것이 좋습니다.
npx tailwindcss init
이렇게 하면 tailwind.config.js 파일이 생성되는대 그 파일을 열면 아래와 같이 생긴 js코드가 있습니다.
module.exports = { content: [], theme: { extend: {}, }, plugins: [], }
이렇게 되면 기본적인 설치와 환경셋팅은 끝이 났고 이젠 보다 조금 더 많은 기능과 용량을 줄이는 것을 목표로 하겠습니다. tailwindcss 의 기본용량만해도 12메가가 넘습니다. 이걸 불러온다는건 트래픽이나 사이트 속도등 엄청 느리고 불편합니다. 그래서 이걸 경량화하여 필요한 css만 추출하도록 할것입니다. 그리고 기본으로 되어 있는 기능 이외에도 여러가직 기능이 있습니다. 더 많은 컬러를 쓸 수 있습니다.
설정해보기
const colors = require('tailwindcss/colors') module.exports = { content: [ './layouts/**/*.html', './layouts/**/assets/js/layout.js', './layouts/**/include/*.html', './layouts/**/opage/*.html', './modules/**/skins/**/*.html' ], darkMode: 'class', // or 'media' or 'class' theme: { extend: {}, colors: { transparent: 'transparent', current: 'currentColor', black: '#000', white: '#fff', primary : colors.cyan, secondary : colors.sky, gray: colors.slate, gray2: colors.gray, slate: colors.slate, neutral: colors.neutral, zinc: colors.zinc, stone: colors.stone, red: colors.red, orange: colors.orange, amber: colors.amber, yellow: colors.yellow, lime: colors.lime, green: colors.green, emerald: colors.emerald, teal: colors.teal, cyan: colors.cyan, sky: colors.sky, blue: colors.blue, indigo: colors.indigo, violet: colors.violet, purple: colors.purple, fuchsia: colors.fuchsia, pink: colors.pink, rose: colors.rose, 'dark': { 50: '#d5dce9', 100: '#b6bfd2', 200: '#9ba6be', 300: '#828b9d', 400: '#677082', 500: '#3d424d', 600: '#282d36', 700: '#1e2026', 800: '#1b1d21', 900: '#17181c', } }, zIndex: { 'm1' : -1, '0': 0, '1': 1, '2': 2, '3': 3, '9': 9, '10': 10, '20': 20, '30': 30, '40': 40, '50': 50, '60': 60, '70': 70, '80': 80, '90': 90, '99': 99, '100': 100, '998': 998, '999': 999, '1000': 1000, 'auto': 'auto', } }, variants: { extend: {}, }, plugins: [], }
이렇게 tailwind.config.js를 수정하신뒤 저장을 하시면 됩니다.
package.json 파일에서 "scripts" 부분에다가 아래처럼 넣으시면 끝이 납니다.
"scripts": { "tailwind": "npx tailwindcss -i ./src/css/tailwind.css -o ./dist/css/tailwind.css --minify" }
완료
이제 명령어를 통해서 tailwind.css 파일을 빌드 하시면 됩니다.
npm run tailwind
References