[JAVA] Vent arrière sur les rails

Pourquoi Tailwind on Rails?

• Pas besoin de décider du nom de la classe
• Éliminez les conflits de nom de classe et libérez-vous de la conception BEM et CSS
• Les CSS qui ne sont plus nécessaires en raison de modifications de conception ne resteront plus ――Vous pouvez voir immédiatement quel style est appliqué à quel élément --Facile à maintenir l'uniformité du code de couleur, de la taille de la police, des points d'arrêt, etc.
• Facile à incorporer facilement un exemple de code qui roule sur le net (même le code écrit par d'autres personnes est facile à personnaliser)
• Pas besoin d'ouvrir ʻapp / assets / stylesheets / any folder / any file` chaque fois que vous modifiez un style

environnement

Rails 6.0.3

introduction

$ 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"), //ajouter à
    require("autoprefixer"), //ajouter à
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
    }),
  ],
};

Contrôle de fonctionnement

$ 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>

utiliser appliquer

Tailwind CSS a une fonctionnalité appelée apply qui vous permet d'appliquer plusieurs classes à la fois. Par exemple, si le même bouton apparaît partout, il est difficile d'écrire font-bold py-2 px-4 arrondi bg-red-500 text-white hover: bg-red-700 à chaque fois, donc btn Spécifiez simplement la classe et utilisez apply pour appliquer la classe ci-dessus.

Lorsque vous utilisez Tailwind avec Rails, il est difficile d'utiliser apply, nous allons donc nous en occuper avec la fonction d'assistance.

(Cet article semble utiliser apply dans Rails, mais si vous le définissez comme ceci, les styles autres que la partie où apply est appliqué ne fonctionneront pas. Était)

$ 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 %>'>bouton</btn>

Préoccupation

TailwindCSS a toutes les classes d'utilitaires possibles, il a donc une taille de fichier plus grande que les autres frameworks CSS. Ce problème est résolu en utilisant une fonction appelée PurgeCSS pour extraire uniquement les styles liés aux classes qui sont réellement utilisées au moment de la génération.

Cependant, lorsque vous utilisez Tailwind on Rails, Purge CSS ne peut pas être utilisé. (Je ne connais pas la méthode de configuration exacte. Veuillez me le faire savoir si vous le savez.) Par conséquent, la taille du fichier sera plus grande que d'habitude.

Au départ, j'étais inquiet à ce sujet et je pensais que Tailwind on Rails serait impossible.

J'ai vérifié le site officiel de Tailwind

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.

Le fait est qu'il a été minifié et gzippé et qu'il est 144.6kb. Étant donné que Bootstrap fait 22,1 Ko, c'est assez lourd, mais je pense que c'est acceptable.

Cela ne sera pas critique si vous définissez correctement gzip, définissez la période de mise en cache dans le navigateur, utilisez CDN, etc.

référence

• Utilisation du CSS Tailwind avec Rails-Qiita