この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
css를 어떤식으로 할지 매번 고민이 되는 것 같습니다. css module, sass, scss, styled-component, emotion, stiches ... 너무 많지만 매번 무언가 부족한 느낌이 들었습니다.
그래서 편하고 쉽고 좋아보이는 css 라이브러리를 고르던 와중 state of css에서 높은 만족도를 보이는 tailwindcss를 써봤습니다.
The State of CSS 2020: CSS Frameworks
기존 리액트 프로젝트에서 tailwindcss를 추가하는 법과 eslint, prettier 설정까지 추가로 해보겠습니다.
Tailwindcss란?
<figure class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
<img class="w-24 h-24 rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 text-center space-y-4">
<blockquote>
<p class="text-lg font-medium">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-sky-500 dark:text-sky-400">
Sarah Dayan
</div>
<div class="text-slate-700 dark:text-slate-500">
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>
Tailwindcss 사이트를 가면 처음 보이는 코드인데요, 보시는 것 처럼 html에 tailwindcss가 지정해둔 css들을 class로 불러와서 사용하는 형태입니다.
축약어로 되어있고 색, 패딩, 마진, 크기 등등 이미 설정이 되어있는 값을 쓰거나 수정하여 쓸 수 있습니다.
축약어로 되어있기 때문에 초반에는 실제 css에 어떻게 맵핑되어있는지 docs를 조금 확인 할 필요는 있지만, vscode 익스텐션 형태로 인텔리센스를 제공하기 때문에 생각보다 갖다 쓰기 편합니다.
Tailwind CSS IntelliSense - Visual Studio Marketplace
전체 코드는 아래의 링크에서 확인 해 주세요.
https://github.com/Tolluset/react-tailwindcss-template
프로젝트에 tailwindcss 추가
기존에 세팅되어있는 리액트 프로젝트는 아래의 링크의 프로젝트를 사용하겠습니다.
https://github.com/Tolluset/react-pj-template
React, typescript, webpack, babel, ESLint, prettier 형태로 구성되어있는 프로젝트입니다.
Tailwindcss, postcss 설정
yarn add -D tailwindcss postcss autoprefixer
Postcss를 통해 tailwindcss를 사용하겠습니다. Postcss가 빌드 시에 tailwindcss를 일반 css로 변환해주게 됩니다.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: { config: './tailwind.config.js' },
autoprefixer: {},
},
};
Postcss 설정 파일을 위와같이 생성해줍시다.
Tailwindcss로 설정파일을 만들어 줍니다.
// tailwind.cofnig.js
module.exports = {
content: ['./src/**/*.tsx', './public/index.html'],
theme: {
extend: {},
},
plugins: [],
};
리액트 파일들과 index.html
포함시켜줍니다.
Webpack 설정
postcss를 통해 tailwindcss를 사용하고 있기 때문에 postcss를 webpack에 연결하겠습니다.
yarn add -D postcss-loader css-loader style-loader
웹팩에서 사용할 로더들을 추가한 후 아래와 같이 로더들을 웹팩에 연결 해 줍니다.
// webpack.config.ts
import path from "path";
import webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import ESLintPlugin from 'eslint-webpack-plugin';
import "webpack-dev-server";
const config: webpack.Configuration = {
mode: "development",
entry: "./src/index.tsx",
module: {
rules: [
{
test: /\.(ts|tsx)$/,
include: path.resolve(__dirname, 'src'),
use: ["babel-loader"]
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'src'),
use: ['style-loader', 'css-loader', 'postcss-loader']
}
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
plugins: [
new HtmlWebpackPlugin({
template: "public/index.html",
}),
new CleanWebpackPlugin(),
new ESLintPlugin({
extensions: ['ts', 'tsx']
})
],
};
export default config;
.css
파일을 postcss-loader
가 처리한 후 css-loader
에게 넘긴다음 @import
구문 같은 것을 처리하고 style-loader
가 html에 붙여주기 때문에 오른쪽 부터 순서대로 해주는게 중요합니다.
작동 확인
테일윈드 글로벌 css를 사용하기 위해 아래와 같이 파일을 생성해줍니다.
// src/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind
부분에 워닝표시가 뜬다면 vscode의 postcss 익스텐션을 사용해주세요.
PostCSS Language Support - Visual Studio Marketplace
이후 index.tsx
에서 테일윈드 파일을 임포트해줍니다.
// src/index.tsx
import React from 'react';
import { render } from 'react-dom';
import App from './App';
import './tailwind.css';
render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
);
그러고 작동하는지 확인해보면
// src/App.tsx
import React from 'react';
const App = () => {
return (
<>
<h1 className="bg-blue-500 text-green-300">React</h1>
<p>How to setting the project</p>
</>
);
};
export default App;
잘 동작하는 걸 확인할 수 있습니다.
ESLint, prettier 설정
Tailwindcss를 위한 eslint, prettier를 설정해보겠습니다.
yarn add -D eslint-plugin-tailwindcss prettier-plugin-tailwindcss
ESLint 설정
플러그인들을 추가한 후 .eslintrc
파일을 수정해줍니다.
// .eslintrc
...
"plugins": [
...
"tailwindcss"
],
"extends": [
...
"plugin:tailwindcss/recommended",
...
],
...
"rules": {
...
"tailwindcss/classname-order": "off",
...
}
플러그인을 plugins
에 정의해주고 extends
에 플러그인이 제공하는 추천 셋팅을 사용합니다. 프리티어를 같이 사용할 때 클래스네임 순서가 둘이 겹치기 때문에 eslint쪽의 룰을 꺼두겠습니다. (prettier 쪽이 tailwindcss 공식 쪽입니다.)
Prettier 설정
{
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"parser": "typescript",
"arrowParens": "always",
"tailwindConfig": "./tailwind.config.js"
}
"tailwindConfig": "./tailwind.config.js"
로 tailwindcss의 설정파일 경로를 지정해줍니다. 지정하지 않으면 알아서 prettier 설정 파일과 같은 디렉토리에서 찾아주지만, 까먹지 않기 위해 설정해둡니다.
작동 확인
존재하지 않는 클래스네임을 잘 잡고 있는걸 확인할 수 있습니다. 워닝을 고친 후 프리티어로 포맷팅을 해주면
아래와 같이 p-2
가 프리티어의 규칙에 맞게 text-green-300
보다 앞으로 간 것을 확인 할 수 있습니다.
에필로그
Tailwindcss 써봐야지 써봐야지 하고 한 1년은 지난 것 같은데 무언가 라이브러리가 잘 익은 지금에서야 쓰는게 오히려 좋은 것 같기도 하고, 아무튼 호불호가 갈릴 것 같은 형태의 라이브러리지만 전 맘에 드네요.
다들 한번씩 맛 보셔도 좋을 것 같습니다. ?
본 블로그 게시글을 보시고 문의 사항이 있으신 분들은 클래스메소드코리아 (info@classmethod.kr)로 연락 주시면 빠른 시일 내 담당자가 회신 드릴 수 있도록 하겠습니다 !