저는 Tailwind CSS + Laravel Mix로 CSS 인코딩을 안 써보도록 하겠습니다.
16455 단어 HTMLlaravelMixtailwindcssCSS
Tailwind CSS란 무엇입니까?
Tailwind CSS는 유틸리티 우선 순위의 CSS 프레임워크입니다.CSS 프레임워크에 대해 말하자면 트위터 Bootstrap은 매우 유명하지만 완성품의 이미지인 Bootstrap에 비해 저전평의 CSS 프레임워크로 설계되어 어떠한 디자인에도 사용할 수 있는 맞춤형 제작이 쉽다는 것이 특징이다.자세한 내용은 을 참조하십시오사이트 제목.
Laravel Mix란 무엇입니까?
Laravel Mix는 웹 팩을 편리하게 사용할 수 있는 포장 도구입니다.이름Laravel이 개발한 응용 프로그램은 진정한 가치를 발휘하지만 라벨을 사용하지 않아도 편리하다.
설치하다
npm 초기화
프로젝트 디렉터리를 만들고 npm 프로젝트를 초기화합니다.$ mkdir tailwind-laravel-mix
$ cd tailwind-laravel-mix
$ npm init -y
package.json가 자동으로 생성됩니다.
Laravel Mix 설치
$ npm install [email protected] --save-dev
$ cp node_modules/laravel-mix/setup/webpack.mix.js ./
$ mkdir src && touch src/app.{js,scss}
node_modules/ 디렉토리에 Laravel Mix가 설치됩니다.
프로젝트 디렉터리 루트 디렉터리에 생성webpack.mix.js.src/ 디렉터리에 빈 app.js 및 app.scss 두 파일을 만듭니다.
Laravel Mix를 사용하여 Sass 파일 컴파일 시도
$ node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js
app.js과app.scss에 아직 아무것도 쓰지 않았기 때문에 app.js 디렉터리에 간단한 빈 app.css과dist/를 만들어야 합니다.
길기 때문에 npmscripts에 로그인하는 것이 편리합니다.
package.json "scripts": {
"build": "node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js"
},
이제 다음과 같은 짧은 명령을 사용할 수 있습니다.$ npm run build
잘못 집행하지 않으면 된다.
Tailwind CSS 설치
$ npm install tailwindcss
node_modules/에 Tailwind CSS를 설치합니다.
Tailwind CSS용 config 파일 만들기
$ npx tailwind init
tailwind.config.js 파일을 자동으로 생성합니다.webpack.mix.js에서 생성된 tailwind.config.js 파일을 읽기로 설정합니다.
webpack.mix.jsconst mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('src/app.js', 'dist/')
.sass('src/app.scss', 'dist/')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
Tailwind CSS 사용
src/app.scss에서 Tailwind CSS를 가져옵니다.
src/app.scss@tailwind base;
@tailwind components;
@tailwind utilities;
우리 구축합시다.$ npm run build
Tailwind CSS 스타일이 dist/app.css 내에 기록되면 성공합니다.
HTML을 만들어 실제 디스플레이를 확인해 보세요.
dist/index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Tailwind CSS Example</title>
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body class="bg-gray-100">
<div class="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl">
<h1 class="block text-xl font-bold leading-normal font-sans">ユーティリティ・ファースト</h1>
<p class="block text-base font-normal leading-relaxed font-sans">プリミティブなユーティリティの固定されたセットから複雑なコンポーネントを構築します。</p>
</div>
<script src="app.js"></script>
</body>
</html>
이런 느낌은 아직 CSS를 쓰지 않았지만 스타일을 적용한 홈페이지를 볼 수 있을 것이다.
Tailwind CSS 설정 변경 시도
프로필에서 Tailwind CSS의 글꼴 패밀리와 색상 등을 변경할 수 있습니다.
tailwind.config.jsmodule.exports = {
theme: {
fontFamily: {
sans: ['"Sawarabi Gothic"', 'sans-serif'],
},
extend: {
colors: {
white: 'red',
},
}
},
variants: {},
plugins: []
}
만약 당신이 구축을 한다면 HTML과 SCSS는 바뀌지 않았지만 디스플레이는 바뀌었다는 것을 발견할 수 있을 것이다.
@apply 사용하기
조합된 클래스는 Tailwind CSS를 사용할 수도 있지만 @apply 를 사용하면 기존의 CSS 클래스와 요소에 대해 Tailwind CSS가 제공하는 스타일을 사용할 수 있습니다.
dist/index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Tailwind CSS Example</title>
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="section">
<h1>ユーティリティ・ファースト</h1>
<p>プリミティブなユーティリティの固定されたセットから複雑なコンポーネントを構築します。</p>
</div>
<script src="app.js"></script>
</body>
</html>
src/app.scss@tailwind base;
@tailwind components;
body {
@apply font-sans bg-gray-100;
}
.section {
@apply max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl;
h1 {
@apply block text-xl font-bold leading-normal;
}
p {
@apply block text-base font-normal leading-relaxed;
}
}
@tailwind utilities;
아까랑 똑같으면 돼.
Purify CSS 활성화
공식 문서에도 기재되어 있다, Tailwind CSS의 단점은 파일 크기가 너무 크다는 것입니다.문서에는 Purgecss를 사용하는 파일 크기 절약법이 있습니다. 이번에는 Laravel Mix에서 사용할 수 있는 Purify CSS를 사용하여 사용하지 않은 선택기를 삭제하고 Minify를 시도해 보십시오.
webpack.mix.jsconst path = require('path');
const glob = require('glob');
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('src/app.js', 'dist/')
.sass('src/app.scss', 'dist/')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
purifyCss: {
purifyOptions: {
minify: true,
},
paths: glob.sync(path.join(__dirname, 'dist/*.html'))
}
});
컴파일한 후 사용하지 않는 CSS에 대한 설명, 앱을 삭제합니다.css의 파일 크기가 대폭 감소했습니다.
어쨌든, 이렇게 하면 인코딩을 시작할 수 있다.
Tailwind CSS는 당사 CTO가 채택을 추진하고 있기 때문에 지식을 쌓을 수 있다면 천천히 노트를 남길 수 있기를 바랍니다.
Reference
이 문제에 관하여(저는 Tailwind CSS + Laravel Mix로 CSS 인코딩을 안 써보도록 하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hissy/items/ab6d95bcd514713104b3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Laravel Mix는 웹 팩을 편리하게 사용할 수 있는 포장 도구입니다.이름Laravel이 개발한 응용 프로그램은 진정한 가치를 발휘하지만 라벨을 사용하지 않아도 편리하다.
설치하다
npm 초기화
프로젝트 디렉터리를 만들고 npm 프로젝트를 초기화합니다.$ mkdir tailwind-laravel-mix
$ cd tailwind-laravel-mix
$ npm init -y
package.json가 자동으로 생성됩니다.
Laravel Mix 설치
$ npm install [email protected] --save-dev
$ cp node_modules/laravel-mix/setup/webpack.mix.js ./
$ mkdir src && touch src/app.{js,scss}
node_modules/ 디렉토리에 Laravel Mix가 설치됩니다.
프로젝트 디렉터리 루트 디렉터리에 생성webpack.mix.js.src/ 디렉터리에 빈 app.js 및 app.scss 두 파일을 만듭니다.
Laravel Mix를 사용하여 Sass 파일 컴파일 시도
$ node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js
app.js과app.scss에 아직 아무것도 쓰지 않았기 때문에 app.js 디렉터리에 간단한 빈 app.css과dist/를 만들어야 합니다.
길기 때문에 npmscripts에 로그인하는 것이 편리합니다.
package.json "scripts": {
"build": "node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js"
},
이제 다음과 같은 짧은 명령을 사용할 수 있습니다.$ npm run build
잘못 집행하지 않으면 된다.
Tailwind CSS 설치
$ npm install tailwindcss
node_modules/에 Tailwind CSS를 설치합니다.
Tailwind CSS용 config 파일 만들기
$ npx tailwind init
tailwind.config.js 파일을 자동으로 생성합니다.webpack.mix.js에서 생성된 tailwind.config.js 파일을 읽기로 설정합니다.
webpack.mix.jsconst mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('src/app.js', 'dist/')
.sass('src/app.scss', 'dist/')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
Tailwind CSS 사용
src/app.scss에서 Tailwind CSS를 가져옵니다.
src/app.scss@tailwind base;
@tailwind components;
@tailwind utilities;
우리 구축합시다.$ npm run build
Tailwind CSS 스타일이 dist/app.css 내에 기록되면 성공합니다.
HTML을 만들어 실제 디스플레이를 확인해 보세요.
dist/index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Tailwind CSS Example</title>
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body class="bg-gray-100">
<div class="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl">
<h1 class="block text-xl font-bold leading-normal font-sans">ユーティリティ・ファースト</h1>
<p class="block text-base font-normal leading-relaxed font-sans">プリミティブなユーティリティの固定されたセットから複雑なコンポーネントを構築します。</p>
</div>
<script src="app.js"></script>
</body>
</html>
이런 느낌은 아직 CSS를 쓰지 않았지만 스타일을 적용한 홈페이지를 볼 수 있을 것이다.
Tailwind CSS 설정 변경 시도
프로필에서 Tailwind CSS의 글꼴 패밀리와 색상 등을 변경할 수 있습니다.
tailwind.config.jsmodule.exports = {
theme: {
fontFamily: {
sans: ['"Sawarabi Gothic"', 'sans-serif'],
},
extend: {
colors: {
white: 'red',
},
}
},
variants: {},
plugins: []
}
만약 당신이 구축을 한다면 HTML과 SCSS는 바뀌지 않았지만 디스플레이는 바뀌었다는 것을 발견할 수 있을 것이다.
@apply 사용하기
조합된 클래스는 Tailwind CSS를 사용할 수도 있지만 @apply 를 사용하면 기존의 CSS 클래스와 요소에 대해 Tailwind CSS가 제공하는 스타일을 사용할 수 있습니다.
dist/index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Tailwind CSS Example</title>
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="section">
<h1>ユーティリティ・ファースト</h1>
<p>プリミティブなユーティリティの固定されたセットから複雑なコンポーネントを構築します。</p>
</div>
<script src="app.js"></script>
</body>
</html>
src/app.scss@tailwind base;
@tailwind components;
body {
@apply font-sans bg-gray-100;
}
.section {
@apply max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl;
h1 {
@apply block text-xl font-bold leading-normal;
}
p {
@apply block text-base font-normal leading-relaxed;
}
}
@tailwind utilities;
아까랑 똑같으면 돼.
Purify CSS 활성화
공식 문서에도 기재되어 있다, Tailwind CSS의 단점은 파일 크기가 너무 크다는 것입니다.문서에는 Purgecss를 사용하는 파일 크기 절약법이 있습니다. 이번에는 Laravel Mix에서 사용할 수 있는 Purify CSS를 사용하여 사용하지 않은 선택기를 삭제하고 Minify를 시도해 보십시오.
webpack.mix.jsconst path = require('path');
const glob = require('glob');
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('src/app.js', 'dist/')
.sass('src/app.scss', 'dist/')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
purifyCss: {
purifyOptions: {
minify: true,
},
paths: glob.sync(path.join(__dirname, 'dist/*.html'))
}
});
컴파일한 후 사용하지 않는 CSS에 대한 설명, 앱을 삭제합니다.css의 파일 크기가 대폭 감소했습니다.
어쨌든, 이렇게 하면 인코딩을 시작할 수 있다.
Tailwind CSS는 당사 CTO가 채택을 추진하고 있기 때문에 지식을 쌓을 수 있다면 천천히 노트를 남길 수 있기를 바랍니다.
Reference
이 문제에 관하여(저는 Tailwind CSS + Laravel Mix로 CSS 인코딩을 안 써보도록 하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hissy/items/ab6d95bcd514713104b3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ mkdir tailwind-laravel-mix
$ cd tailwind-laravel-mix
$ npm init -y
$ npm install [email protected] --save-dev
$ cp node_modules/laravel-mix/setup/webpack.mix.js ./
$ mkdir src && touch src/app.{js,scss}
$ node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js
"scripts": {
"build": "node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js"
},
$ npm run build
$ npm install tailwindcss
$ npx tailwind init
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('src/app.js', 'dist/')
.sass('src/app.scss', 'dist/')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
@tailwind base;
@tailwind components;
@tailwind utilities;
$ npm run build
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Tailwind CSS Example</title>
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body class="bg-gray-100">
<div class="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl">
<h1 class="block text-xl font-bold leading-normal font-sans">ユーティリティ・ファースト</h1>
<p class="block text-base font-normal leading-relaxed font-sans">プリミティブなユーティリティの固定されたセットから複雑なコンポーネントを構築します。</p>
</div>
<script src="app.js"></script>
</body>
</html>
module.exports = {
theme: {
fontFamily: {
sans: ['"Sawarabi Gothic"', 'sans-serif'],
},
extend: {
colors: {
white: 'red',
},
}
},
variants: {},
plugins: []
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Tailwind CSS Example</title>
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="section">
<h1>ユーティリティ・ファースト</h1>
<p>プリミティブなユーティリティの固定されたセットから複雑なコンポーネントを構築します。</p>
</div>
<script src="app.js"></script>
</body>
</html>
@tailwind base;
@tailwind components;
body {
@apply font-sans bg-gray-100;
}
.section {
@apply max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl;
h1 {
@apply block text-xl font-bold leading-normal;
}
p {
@apply block text-base font-normal leading-relaxed;
}
}
@tailwind utilities;
const path = require('path');
const glob = require('glob');
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('src/app.js', 'dist/')
.sass('src/app.scss', 'dist/')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
purifyCss: {
purifyOptions: {
minify: true,
},
paths: glob.sync(path.join(__dirname, 'dist/*.html'))
}
});
Reference
이 문제에 관하여(저는 Tailwind CSS + Laravel Mix로 CSS 인코딩을 안 써보도록 하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hissy/items/ab6d95bcd514713104b3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
