[JAVA] Rückenwind auf Schienen

Warum Rückenwind auf Schienen?

• Sie müssen den Klassennamen nicht festlegen
• Beseitigen Sie Klassennamenkonflikte und befreien Sie sich vom BEM- und CSS-Design
• CSS, das aufgrund von Designänderungen nicht mehr benötigt wird, bleibt nicht mehr erhalten ――Sie können sofort sehen, welcher Stil auf welches Element angewendet wird
• Einfache Aufrechterhaltung der Einheitlichkeit von Farbcode, Schriftgröße, Haltepunkten usw.
• Einfache Integration von Beispielcode, der im Netz läuft (selbst von anderen Personen geschriebener Code lässt sich leicht anpassen)
• Sie müssen "App / Assets / Stylesheets / Beliebiger Ordner / Beliebige Datei" nicht jedes Mal öffnen, wenn Sie einen Stil ändern

Umgebung

Rails 6.0.3

Einführung

$ yarn add tailwindcss
$ yarn tailwindcss init
$ mkdir app/javascript/css
$ touch app/javascript/css/tailwind.css

app/javascript/css/tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

app/javascript/packs/application.js

import '../css/tailwind.css';

postcss.config.js

module.exports = {
  plugins: [
    //...
    require("tailwindcss"), //hinzufügen
    require("autoprefixer"), //hinzufügen
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
    }),
  ],
};

Funktionsprüfung

$ rails g controller test index

config/routes.rb

root to: 'tests#index'

erb:app/views/tests/index.html.erb

<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/women/17.jpg " alt="Woman's Face">
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-tight">Erin Lindford</p>
      <p class="text-sm leading-tight text-gray-600">Customer Support Specialist</p>
      <div class="mt-4">
        <button class="text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">Message</button>
      </div>
    </div>
  </div>
</div>

Verwenden Sie anwenden

Rückenwind-CSS verfügt über eine Funktion namens "Anwenden", mit der Sie mehrere Klassen gleichzeitig anwenden können. Wenn zum Beispiel überall dieselbe Schaltfläche angezeigt wird, ist es schwierig, jedes Mal "font-fett py-2 px-4 gerundet bg-rot-500 text-weiß schweben: bg-rot-700" zu schreiben, also "btn" Geben Sie einfach die Klasse an und verwenden Sie apply, um die obige Klasse anzuwenden.

Wenn Sie Tailwind mit Rails verwenden, ist es schwierig, apply zu verwenden, daher werden wir uns mit der Hilfsfunktion befassen.

(Dieser Artikel scheint in Rails anwenden zu verwenden. Wenn Sie dies jedoch so einstellen, funktionieren die anderen Stile als der Teil, auf den angewendet wird, nicht. War)

$ rails g helper tailwind

app/helpers/tailwind_helper.rb

module TailwindHelper
  def btn
    'fosnt-bold py-2 px-4 rounded bg-red-500 text-white hover:bg-red-700'
  end
end

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  helper TailwindHelper
end

erb:app/views/tests/index.html.erb

<a href='#' class='<%= btn %>'>Taste</btn>

Besorgnis, Sorge

TailwindCSS verfügt über alle möglichen Dienstprogrammklassen und ist daher größer als andere CSS-Frameworks. Dieses Problem wird gelöst, indem eine Funktion namens PurgeCSS verwendet wird, um nur die Stile zu extrahieren, die sich auf die Klassen beziehen, die zur Erstellungszeit tatsächlich verwendet werden.

Bei Verwendung von Rückenwind auf Schienen kann Purge CSS jedoch nicht verwendet werden. (Ich kenne die genaue Einstellmethode nicht. Bitte lassen Sie es mich wissen, wenn Sie es wissen.) Daher ist die Dateigröße größer als üblich.

Anfangs war ich darüber besorgt und dachte, dass Rückenwind auf Schienen unmöglich sein würde.

Ich habe die [offizielle Website von Tailwind] überprüft (https://tailwindcss.com/docs/controlling-file-size/).

Using the default configuration, the development build of Tailwind CSS is 1996kb uncompressed, 144.6kb minified and compressed with Gzip, and 37.kb when compressed with Brotli.

Der Punkt ist, dass es minimiert und komprimiert wurde und "144,6 KB" ist. Wenn man bedenkt, dass Bootstrap "22.1kb" ist, ist es ziemlich schwer, aber ich denke, es ist akzeptabel.

Es ist nicht kritisch, wenn Sie gzip richtig einstellen, den Zeitraum so einstellen, dass er im Browser zwischengespeichert wird, CDN verwenden und so weiter.

Referenz

• Verwenden von Rückenwind-CSS mit Rails-Qiita