내 첫 번째 Tailwind CSS 플러그인 작성

my website를 사용하여 구축Tailwind CSS을 하는 동안 저는 점점 더 구체적인 수요가 많아졌습니다. 예를 들어 backdrop-filter 모호 중첩 효과를 만들고 autofill 폼 필드를 자동으로 완성할 때의 위조 스타일 등입니다. 이런 용례는TailwindCSS 핵심 패키지에 없습니다.그래서 나는 사용자 정의 CSS 속성을 사용할 수 있도록 HTML을 떠나서 단독 CSS 파일을 작성해야만 했다.CSS를 따로 쓰는 건 좋지만 광고가 있는 건 싫어요
곳곳에 hoc CSS 파일이 있습니다. 이것은 저에게 반모드와 같습니다. 순풍 CSS를 사용하십시오. 특히 테마 시스템이 어디서나 보이기 시작할 때입니다.그래서 나는 물었다.

"Why don't I just create a TailwindCSS plugin, I'll get to see how it works more specifically, too!".

나 왔어.

TL;DR: It turned out pretty fun!

tailwindcss 자동 충전 변체

첫 번째 플러그인은 원소가 특수한 상태(예를 들어 hover, focus 등에 들어갈 때 스타일을 추가하는 변체를 추가했다.
내가 필요로 하는 상태는 폼 필드가 자동으로 완성될 때이다.
기본적으로 양식 필드가 자동으로 완성되면 해당 전경과 배경이 일부 브라우저 기본값으로 변경됩니다.

그러나 기본 설정은 분명히 내 디자인에 적용되지 않는다.TailwindCSS를 사용하는 완벽한 방법은 다음과 같습니다.

<input className="autofill:bg-white autofill:text-gray-700" />

그래서 나는 그것을 지지하기 위해 변체를 썼다.결과는 간단합니다.

const plugin = require("tailwindcss/plugin");

const autofill = plugin(({ addVariant, e }) => {
  addVariant("autofill", ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      const newClass = e(`autofill${separator}${className}`);
      return [
        `.${newClass}:-webkit-autofill`,
        `.${newClass}:-webkit-autofill:hover`,
        `.${newClass}:-webkit-autofill:focus`,
      ].join(",");
    });
  });
});

module.exports = autofill;

내가 한 addVariant 호출에서 호출tailwindcss/plugin한 것은 두 가지 기본 내용을 포함한다.

이름 또는 표시자: autofill.이렇게 하면 구문autofill:text-gray-100이 활성화됩니다.

접두사 클래스의 함수를 수정합니다.예를 들어 내가 autofill:text-gray-100를 사용할 때 이 함수는 className=text-gray-100를 받는다. 이 함수는 이 종류를 목표 상태를 정확하게 처리할 수 있는 것으로 수정하는 것이다. 이 예는-webkit-autofill이다.

NPM 패키지check out its repo to see more를 발표했습니다.
지금 내가 해야 할 일은 이 플러그인을tailwindplugins에 추가하는 것이다.배치하다.js.

module.exports = {
  // ...
  plugins: [
    require("tailwindcss-autofill"),
    // Other plugins.
  ],
  variants: {
    extend: {
      // Enable `autofill` variant for essential plugins.
      borderColor: ["autofill", "dark"],
      textColor: ["autofill", "dark"],
      backgroundColor: ["autofill", "dark"],
    },
  },
};

이 플러그인은 borderColor, focusRing 대부분의 다른 플러그인과 함께 사용할 수 있습니다. 불행하게도, backgroundColor 와 textColor 는 사용할 수 없습니다. 브라우저가 사용하는 특수한 속성이 우선순위를 얻었기 때문입니다. (이상합니다.)따라서 해결 방안은 -webkit-text-fill-color을 전망으로 하고 특수한 box-shadow 값을 배경으로 덮어쓰는 것이다.

tailwindcss 텍스트 채우기와 tailwindcss 음영 채우기

-webkit-text-fill-color와 배경 충전 사용box-shadow도 TailwindCSS 핵심 패키지에서 지원하지 않는 특수한 속성입니다.그래서 나는 각각 다른 두 개의 플러그인tailwindcss-text-fill과 tailwindcss-shadow-fill을 짰다.
이번에 이 두 개의 새 플러그인은 변체가 아닌 실용 프로그램을 추가했다.TailwindCSS 유틸리티는 요소 스타일을 쉽게 설정할 수 있는 클래스입니다. 예를 들어 text-gray-100, bg-red-50 등입니다.
다음은 코드 중 하나입니다.

const plugin = require("tailwindcss/plugin");
const flatten = require("flatten-tailwindcss-theme");

const textFill = plugin(
  ({ addUtilities, variants, theme, e }) => {
    const colors = flatten(theme("colors"));
    const utils = Object.entries(colors).reduce(
      (res, [key, value]) =>
        Object.assign(res, {
          [`.${e(`text-fill-${key}`)}`]: {
            "-webkit-text-fill-color": value,
          },
        }),
      {}
    );
    addUtilities(utils, variants("textFill"));
  },
  { variants: { textFill: [] } }
);

module.exports = textFill;

이 플러그인은 text-fill-{color} 클래스나 text-{color} 클래스처럼 여러 개의 bg-{color} 클래스를 생성할 것입니다.가장 멋있는 것은 주제를 동적으로 존중하고 습관적인 색깔(현재 디자인 시스템의 색깔)만 클래스를 생성하며 VS 코드의 모든 Intellisense 기능은 자동으로 통합됩니다(tailwindcss-autofill 플러그인과 같습니다).

최종 결과

결국 그것은 성공했다🔥!
다음은 내 어셈블리를 설계하는 방법입니다.

<input
  className={classNames(
    "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100",
    "autofill:text-fill-gray-900 autofill:shadow-fill-white dark:autofill:shadow-fill-gray-800 dark:autofill:text-fill-gray-100"
  )}
/>

실제 생활에서의 최종 결과를 보고 checkout my website 구독 뉴스 원고 표를 테스트하려면 즉시 결과를 입력하세요!

마지막 생각

나는 네가 지금 무슨 생각을 하고 있는지 안다

A couple of different CSS properties and pseudo-classes turned into 3 JS plugins.

그래.그러나 사실 이 플러그인들도 많은 시간이나 LOC가 필요하지 않다. 특히 지금은 단독 CSS, 클래스 이름을 만들고, 순풍에 기반한 다른 설정과 함께 그것을 유지하는 데 소모되는 노력이 거의 같다.다른 한편, 나도 장래에 서로 다른 목적을 위해 이 플러그인을 다시 사용할 수 있다.기억하다
Tailwind를 사용할 때 추가 CSS를 거의 작성하지 않습니다. 플러그인을 많이 추가할수록 미래 프로젝트에서 추가 CSS를 작성할 가능성이 낮아집니다.
모든 플러그 인이 릴리즈되고 소스가 시작되었으며 자세한 내용을 보려면 다음을 참조하십시오.

tailwindcss-autofill

tailwindcss-text-fill

tailwindcss-shadow-fill

My website is open-source, too.