1. tailwindcss
tailwindcss는 “Utility-First Fundamentals”이라는 기본 컨셉의 CSS 프레임워크다. 기존의 스타일링 방식은 html 요소에 스타일을 지정할 때마다 CSS를 작성해야 하지만 tailwindcss를 사용하면 css를 직접 작성할 필요없이 class로 제공되는 제공되는 기본 유틸리티 세트를 html에 추가하는 것으로 스타일을 지정할 수 있다.
tailwindcss는 모든 html, JavaScript 등에서 tailwindcss class를 검색하고 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하는 방식으로 작동한다.
2. Install
tailwindcss 설치 방법은 4가지다.
- tailwindcss CLI로 설치
- PostCSS의 플러그인으로 설치
- 프레임워크(React, Next.js, Gatsby 등)에 추가
- CDN 사용
프레임워크에 사용하지 않는 경우 권장되는 방법은 tailwindcss를 PostCSS의 플러그인으로 설치하는 것이다. 이에 대해 살펴보자.
JS 플러그인으로 스타일을 트랜스파일링하는 도구인 PostCSS를 Webpack을 통해 사용할 것이므로 결국 tailwindcss도 Webpack 환경에서 빌드된다.
$ mkdir tailwind-demo && cd tailwind-demo
$ npm init -y
# install webpack & dev-server & loader
$ npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader postcss-loader
# install tailwindcss & postcss & autoprefixer plugin
$ npm install --save-dev tailwindcss postcss autoprefixer
# create source files
$ mkdir src && touch src/index.html src/index.js src/tailwind.css
3. Setup
src/tailwind.css 파일에 다음을 추가해 기본 스타일을 설정한다.
@tailwind base;
@tailwind components;
@tailwind utilities;
src/index.js 파일에서 tailwind.css를 임포트한다.
import './tailwind.css';
src/index.html 파일에 tailwindcss가 반영되었는지 살펴보기 위해 tailwindcss를 사용하는 html 요소를 추가한다.
<!DOCTYPE html>
<html>
<body>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Button</button>
</body>
</html>
webpack.config.js에 다음과 같이 설정을 추가한다.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/',
clean: true,
},
plugins: [new HtmlWebpackPlugin({ template: 'src/index.html' })],
module: {
rules: [
{
test: /\.css$/i,
include: path.resolve(__dirname, 'src'),
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
devServer: {
static: { directory: path.join(__dirname, 'dist') },
open: true,
port: 'auto',
},
devtool: 'source-map',
mode: 'development',
};
다음 명령을 실행해 tailwind.config.js 파일을 생성한다.
$ npx tailwindcss init
tailwind.config.js 파일에 다음을 추가한다.
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js 파일을 생성하고 다음을 추가한다.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
autoprefixer는 브라우저 지원 범위에 따라 prefixer를 붙인다. 위 설정에 브라우저 지원 범위를 추가할 수도 있지만 빌드 시에 warning이 발생하므로 .browserslistrc 파일을 생성하고 브라우저 지원 범위를 명시한다. 브라우저 지원 범위는 package.json에 추가해도 좋다.
# Browsers that we support
# https://github.com/browserslist/browserslist#readme
# 전세계 점유율 2% 이상의 브라우저만 지원
> 2%
# 최근 2개 버전의 브라우저
last 2 versions
# IE 10 이하 미지원
not ie <= 10
package.json의 scripts에 다음을 추가한다.
...
"scripts": {
"start": "webpack serve",
},
...
webpack-dev-server의 실행을 위해 다음과 같이 package.json scripts의 start를 실행한다.
$ npm start