ruby-flowbite-tailwind-css

1. Instalação do Tailwind CSS e Flowbite no Ruby on Rails 8

Vídeo Tutorial - Youtube

Vamos criar uma nova aplicação Rails configurada com PostgreSQL, Tailwind CSS e Flowbite, pulando a instalação do Jbuilder.

1. Crie a aplicação com o comando:

 rails new app --database=postgresql --css=tailwind --skip-jbuilder

💡 O banco de dados é opcional. O essencial aqui é configurar o Tailwind e usar o parâmetro --skip-jbuilder.

1. Após rodar o comando acima entre no diretório da sua aplicação:

cd app

1. Em seguida acesso o diretório do javascript que fica em vendor/javascript:

cd vendor/javascript

1. Rode o código terminal para geração do arquivo flowbite.turbo.min.js dentro do diretório vendor/javascript:

curl https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.turbo.min.js > flowbite.turbo.min.js

1. Retorne para o diretório vendor com o comando:

cd ..

1. Crie um novo diretório chamado assets:

mkdir assets

1. Entre no diretório assets:

cd assets

1. Crie um novo diretório chamado stylesheets:

mkdir stylesheets

1. Entre no diretório stylesheets:

cd stylesheets

1. Rode o código terminal para gerar o arquivo flowbite.min.css:

curl https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css > flowbite.min.css

1. Retorne para o diretório principal de sua aplicação usando cd.. até chegar a base, e depois abra o VScode com:

code .

2. Configuração do importmap

1. Na sua aplicação procure pelo arquivo importmap.rb e adicione o código:

pin "flowbite", to: "flowbite.turbo.min.js"

1. No arquivo application.js adicione a importação ao flowbite:

import "flowbite"

3. Configuração do Tailwind

1. Se não existir o arquivo config/tailwind.config.js crie ele, dentro do arquivo adicione o código abaixo:

module.exports = {
    darkMode: "class",
    content: [
        "./public/*.html",
        "./app/helpers/**/*.rb",
        "./app/javascript/**/*.js",
        "./app/views/**/*.{erb,haml,html,slim}",
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ["Inter var", ...defaultTheme.fontFamily.sans],
            }
        }
    },
    plugins: [
        require("@tailwindcss/forms"),
        require("@tailwindcss/typography"),
        require("@tailwindcss/container-queries")
    ]
}

4. Configuração do application.html.erb

1. No seu arquivo application.html.erb adicione o seguinte código dentro do head:

<%= stylesheet_link_tag "flowbite.min", "data-turbo-track": "reload" %>

Pronto agora o Flowbite deve está funcionando em sua aplicação, há algumas formas de testar, podemos subir o nosso servidor com,

bin/dev

Depois de abrir uma página web, podemos abrir o console pressionando F12, ir até a aba Sources e procurar pelos arquivos flowbite.min, tailwind e flowbite.turbo dentro do diretório assets/controllers. Também é possível pegar alguns componentes diretamente no site do Flowbite, por exemplo: Flowbite . Podemos copiar um modal de lá, colar na view e verificar se ele funciona corretamente.