Tailwind CSS 및 Alpine.js가있는 최대 스타터

이 기사는 Eleventy, Tailwind CSS 및 Alpine.js를 사용하여 개인 웹 사이트를 구축하는 간소화 된 접근 방식을 자세히 설명하여 단순성과 최소 디자인을 강조합니다. 이 가이드는 기존의 잠재적으로 복잡한 스타터를 사용하는 대신 간단한 설정을 안내합니다.

전제 조건 : Tailwind CSS, HTML, JavaScript, Nunjucks 템플릿 엔진, 명령 줄 및 NPM에 대한 친숙 함이 가정됩니다.

1 단계 : 프로젝트 설정

새 프로젝트 디렉토리를 만들고 터미널에서이를 탐색 한 다음 package.json 파일을 초기화하십시오.

 npm init -y

Eleventy 및 Tailwind CSS를 설치하십시오.

 npm install -d @11ty/elventy tailwindcss @최신

2 단계 : 테스트 페이지 작성

index.njk (홈페이지) 및 _includes/default.njk (기본 템플릿)를 작성하십시오. index.njk default.njk 확장합니다.

 
{ %는 "_includes/default.njk" %}을 확장합니다.

{ % 블록 제목 %} 작동 { % endblock %}

{ % 블록 컨텐츠 %}
  <div>
    <div>
      좋은 디자인<br><br>
      ~이다<br><br>
      작은 디자인으로<br><br>
      가능한 한
    </div>
  </div>
{ % endblock %}

 



  <title>{ % 블록 제목 %} 작동합니까? { % endblock %}</title>
  <meta charset="UTF-8">
  { % description의 경우 %}
    <meta content="{{설명}}" name="description">
  { % endif %}
  <meta content="ie=edge" http-equiv="x-ua-compatible">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" name="viewport">
  <link href="/style.css?v=%7B%%20version%20%%7D" rel="stylesheet">
  { % 블록 헤드 %} { % endblock %}


  { % 블록 컨텐츠 %}
    {{내용 | 안전한 }}
  { % endblock %}

3 단계 : 테일 윈드 CSS 구성

styles/tailwind.config.js 및 styles/tailwind.css 만듭니다.

 // Styles/Tailwind.config.js
module.exports = {
  내용 : [ '_site/**/*. html'],
  SAFELIST : [],
  주제: {
    연장하다: {
      색상 : {
        변경 : '투명',
      },
    },
  },
  플러그인 : [],
}

 // Styles/Tailwind.css
@tailwind베이스;
@tailwind 구성 요소;
@tailwind 유틸리티;

@Layer 유틸리티 {
  .변화 {
    색상 : 투명;
  }
}

4 단계 : 프로젝트 구성 및 빌드

불필요한 파일을 제외하려면 .gitignore 작성하십시오.

 <code>_site/ .DS_Store node_modules/</code>

Eleventy를 구성하려면 .eleventy.js 작성하십시오.

 const htmlmin = 요구 ( 'html-minifier');
const now = string (date.now ());

module.exports = function (eleventyconfig) {
  eleventyconfig.addwatchtarget ( './ styles/tailwind.config.js');
  eleventyconfig.addwatchtarget ( './ styles/tailwind.css');
  eleventyconfig.addpassthroughcopy ({ './_tmp/style.css': './style.css'});
  eleventyconfig.addshortCode ( 'version', function () {return now;});

  eleventyconfig.addtransform ( 'htmlmin', function (content, outputpath) {
    if (process.env.eleventy_production && outputpath && outputpath.endswith ( '. html')) {
      return htmlmin.minify (content, {useshortDoctype : true, removecomments : true, collapsewhitespace : true});
    }
    반환 내용;
  });
};

빌드 스크립트로 package.json 업데이트합니다.

 {
  "스크립트": {
    "시작": "eleventy --- Serve & NPX Tailwindcss -I Styles/Tailwind.css -C 스타일/Tailwind.config.js -o _site/style.css -Watch",
    "빌드": "eleventy_production = true eleventy && node_env = 제작 npx tailwindcss -i 스타일/테일 윈드.
  },
  "devddependencies": {
    "@11ty/elventy": "^1.0.0",
    "Tailwindcss": "^3.0.0",
    "html-minifier": "^4.0.0"
  }
}

npm install 실행 한 다음 npm start 개발 서버를 시작하십시오. tailwind.config.js 및 tailwind.css 수정하여 Tailwind의 반응성을 테스트하십시오. 생산 빌드를 위해 npm run build 실행하십시오.

5 단계 : Alpine.js 통합

Alpine.js 설치 :

 NPM 설치 -D alpinejs

alpine.js를 복사하려면 .eleventy.js 업데이트합니다.

 // ... (이전 .eleventy.js content) ...
eleventyconfig.addpassthroughcopy ({ './node_modules/alpinejs/dist/cdn.js': './js/alpine.js'});
// ... (.eleventy.js 컨텐츠의 나머지) ...

닫기 전에 alpine.js를 _includes/default.njk 에 추가하십시오

위 내용은 Tailwind CSS 및 Alpine.js가있는 최대 스타터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!