密かに

10215 ワード

概要
私はTailwindが好きです、しかし、仕事でそれを使うことは私が売ることができなかった考えです.私がここでカバーしないユーティリティCSSを愛する理由の束があります.
ここで、私はちょうどTarwindを使用して、より身近なCSSにかなり簡単にそれを変える方法を示しています.
今日は、私たちのシステムがどのようなものであるかをカバーしています.また、どのようにして、私たちはTailwindを使っています.

仕事の制約

0コマンドラインビルドステップ.
CodeKitでコンパイルされたsassだけを使用します.多くのDEVSはパスにノードを持たない.

$ node -v
> node: command not found

SASSネストされたCSSコードベース.
我々は、SASSネスティングを介して名前空間のコンポーネントを構築します.

.component {
    .card {...}
    .title {...}
    .button {...}
}
/* Which compiles to: */
.component .card {...}
.component .title {...}
.component .button {...}

スタック
TwigとjQueryを使ったHTMLレンダリングサーバー.反応のような何かを持って、Vue、LITE HTMLは、単に行われません.ほとんどのページはJavascriptやビルドステップなしで動作するはずです.

IE 11 Compat問題
TailWindCSS v 2のいくつかのことはIEでは動作しません.したがって、IE 11でテストし、必要に応じてパッチを取ります.TailwindはIE 11をサポートしていませんので、これは制約になります.

工具

Twind
Twindは、Tailwindのためのブラウザのコンパイラです.あなたのような普通のクラスを書きます.

あなたのブラウザの検査官と選択のコードエディタ
私はFirefoxとVscodeを使用していますが、これは任意のまともなブラウザとエディタで動作するはずです.

プロセス
あなたが一度に1つのセクション/コンポーネントを働かせるならば、これは最も働きます.

1)正規クラスからの分割風風クラス.class属性からtw属性にTailwindクラスを移動します.(必要に応じて名前を挙げることができます.

2 ) CSSを生成する.
このスクリプトをHTMLにドロップします.

<script type="module">
  // Import the needed Modules
  import { tw, apply } from "https://unpkg.com/twind?module";
  import { domSheet } from "https://cdn.jsdelivr.net/npm/[email protected]/sheets/sheets.js";

  // find all of the classes with the tw classes.
  [...document.querySelectorAll("[tw]")].forEach((el) => {

    // get the string of tailwind classes
    const listOfClasses = el.getAttribute("tw");

    // @apply the tailwind utils on 1 class, 
    // rather than into several util classes.
    const bundledClass = apply`${listOfClasses}`;

    // this will append the class to the <head>
    const generatedClass = tw`${bundledClass}`;

    // this will add the class to the element
    // which will apply the expected styles
    // the styles were initally removed when 
    // you moved the tw classes to the tw attribute 
    el.classList.add(generatedClass);
  });
</script>

3)生成されたHTMLをコードに移動します.
あなたのコンポーネントからouterhtmlをコピーして、あなたのブラウザーからあなたのテンプレートに(あなたのtwの底で)生成されたスタイルタグをコピーしてください.クラス名はランダムな文字です.これについて心配しないでください、我々は後でそれを修正します.

4)生成されたクラスをコードに追加します.
これは説明する最も混乱している部分ですが、VSCodeと他のエディタには、良い検索と置換機能があります.基本的には、HTMLの新しいクラスとその順序をすべて見つけ、テンプレートのHTML要素に同じ順序で貼り付けます.あなたが右のショートカットを知っているならば、これはかなり無痛でありえます.あなたのコンポーネントテンプレートが<head>を使用していない場合は、if/for/etc、CMD + D、Shift、および矢印キーの組み合わせで約10秒でこれを行うことができます.誰かが興味があるならば、私はこれのビデオを作ります.

5 )ブラウザHTMLを削除します.
ブラウザから引いたコンポーネントHTMLを削除することができます.

6 )クラスの名前を変更する.
技術的には、あなたのテンプレートのコードは、現在動作します!しかし、あなたのCSSクラス名がAltであるならば、人々はあなたが少し狂っていると思います.それで、我々はより賢明なクラス名でそれらのWackyクラス名のすべてのインスタンスを見つけて、取り替えます.そのための私のプロセス: HTML .tw-dgt4fdに生成されたクラスをハイライトします(このテキストのすべてのインスタンスを選択します).そこから、HTML構造を見ている間、クラスの名前を変更します.

7 ) CSSをクリーンアップします.
この時点で、コンポーネントの名前空間クラスをHTMLにドロップし、名前空間を入れ子にします.いくつかのメディアクエリは生成されたクラス間で冗長であるかもしれません、しかし、それらを合併することは十分簡単です.

7 )生産用のテンプレートを設定します.(オプション)
私は、サイトが生産または開発のためにレンダリングされているかどうかを確かめるためにTwigで参照できる変数を持っています.TWクラスは次のようにします.

<a
    href="//example.com"    
    class="component button"
    {{ dev ? 'tw="w-32 h-10"' }} 
>

それはあなたがDEDでない限りCmd + Shift + L属性をレンダリングしません.それはあなたのコードが過剰な属性を持たないことを意味します.私も上記のスクリプトのための同じ原則を適用します.いいえ、それをprodに含める必要はありません.
スーパーオプションで、コンポーネントのレンダリングからtw属性を防ぐことができるコンポーネントレベルの変数があります.

お済みです
それは基本的にそれです.IEでもう少しテストすると、スタイルタグをsassパーティションに移動する必要がありますが、これらのステップのすべてはタスクからタスクに変化します.

結論
あなたが簡単にプロジェクトに戻っているときにTarwindを使用して戻って行くことができることを意味します.一方、Tarwindはサイトで公的に全く使われていません!テール風の唯一のトレースは、tw属性、およびDEVにのみ表示されるスクリプトタグです.

概要
このポストはテール風を使用して非常に効果的であるという良い妥協を概説して、尾風と友好的でないコードベースで働いています.あなたがこれをセットアップするか、質問をするどんな援助も必要とするならば、私にDMを与えてください.

Reference

この問題について(密かに), 我々は、より多くの情報をここで見つけました https://dev.to/jackhpeterson/secretly-tailwindcss-3j4n

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Androidジョブ:シンプルコンピューティング実装

レットイットスノー