Webpack 및 Tailwind CSS 설정
패키지.json 만들기
npm init -y
src 폴더를 만들고 빈 index.js 파일을 추가합니다.
웹팩 설정
웹팩 및 로더 설치
npm install webpack webpack-cli webpack-dev-server postcss-loader css-loader
-D
루트에 webpack.config.js를 만들고 파일을 업데이트합니다.
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
bundle: path.resolve(__dirname, 'src/index.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name][contenthash].js',
clean: true,
assetModuleFilename: '[name][ext]',
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
devServer: {
static: {
directory: path.resolve(__dirname, 'dist'),
},
port: 3000,
open: true,
hot: true,
compress: true,
historyApiFallback: true,
}
};
Tailwind CSS 설정
Tailwind CSS 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
PostCSS 구성에 Tailwind를 추가합니다.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
템플릿 경로를 구성합니다.
// tailwind.config.js
module.exports = {
content: ['./dist/*.html'],
theme: {
extend: {},
},
plugins: [],
}
CSS에 Tailwind 지시문을 추가합니다.
// styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
HTML에서 Tailwind를 사용하세요.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/main.css" rel="stylesheet">
</head>
<body>
<h1 class="text-center p-3">
Webpack with Tailwind CSS
</h1>
</body>
</html>
package.json에 스크립트를 추가합니다.
"scripts": {
"dev": "webpack serve",
"build": "webpack"
},
앱 실행
한 번 빌드하고 dist/bundle.js를 생성하려면
npm run build
웹팩 서버를 실행하려면
num run dev
이제 Tailwind CSS로 Webpack을 설정할 수 있습니다!
액션 체크에서 이것과 그 이상을 보려면:
GITHUB
출처:
Tailwind CSS
Webpack
Reference
이 문제에 관하여(Webpack 및 Tailwind CSS 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/j45t7/webpack-tailwind-css-setup-35bm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
