TheLazy.Dev
Portfolio GitHub

Blog

phoenix |elixir |programming |beam

O minimo de Tailwind que voce precisa saber para trabalhar com Elixir/Phoenix

postelxpro

Elxpro

Posted on June 30, 2022

O minimo de Tailwind que voce precisa saber para trabalhar com Elixir/Phoenix

Saudacao

Seja muito bem vindo, seja muito bem vinda ao #FullstackElxpro

Do you want to learn Elixir in three months? https://elxpro.com/sell

Aqui nós discutimos as estratégias e dicas de sua jornada de aprendizado em Elixir. Isso é do zero até a sua primeira vaga como desenvolvedor elixir

Eu sou o Gustavo e o tema de hoje é: O minimo de Tailwind que voce precisa saber para trabalhar com Elixir/Phoenix

_ps: Voce pode acompanhar o artigo com o video

Quer aprender mais sobre elixir em um canal do Telegram?
https://elxpro.com/elxcrew-org-yt-descr

O que é o Tailwind?

E um framework CSS que oferece a possibilidade de você criar layouts usando uma estrutura de CSS pronta. Isso permite que você otimize o tempo de criação de uma UI sem precisar fazer tudo manualmente.

Como foi que eu descobri o Tailwind?

Eu descobri o Tailwind quando estava para entregar meu primeiro projeto para uma empresa utilizando Elixir/Phoenix, estava Eu nao queria entregar utilizando CSS pois ia demandar muito tempo, o bootstrap era uma otima opcao mas quando procurava por temas de dashboards gratuitos na internet estava extremamente complicado de achar um tema, procurei outras opcoes e cheguei a cogitar a possibilidade de utilizar o MaterializeCss mas tambem eu precisava de um layout e so achei temas pagos, ate que descobri o Tailwind e achei layouts de dashboards gratuitos, simples de instalar e facil de utilizar pois eu so precisava importar o tailwind e copiar e colar o html de um site chamado TailwindComponents.

Quando foi a primeira vez que coloquei em producao?

Isso foi ha mais ou menos 4 anos atras, a experiencia foi interessante, pois ficou facil nao me preocupar em criar layouts, e na epoca o tailwind nao tinha a quantidade de recursos que ele possui hoje.

Hoje, voce pode entrar no tailwindcomponents, tailwindUI, entre outros websites e achar conteudos incriveis e faceis de adaptar para o que voce precisa. Voltando ao assunto, naquela epoca ja tinha excelentes recursos, inclusive para deixar tudo mobile-friendly, que ajudou muito eu ganhar meu cliente e proporcionar uma otima experiencia para os seus clientes em um curto periodo de tempo.

A unica desvantagem que encontrei foi a questao de ter codigos verbosos, se nao tomar cuidado, mas o que foi interessante e que esse projeto me abriu portas para o exterior pois eu tinha esse projeto em producao, o que me facilitou pegar projetos fora do Brasil utilizando a famosa PETAL stack (nao gosto muito do alpine e pessoas com quem venho trabalhando tambem dize o mesmo mas isso nao e o foco nessa conversa) :D

Por quê Tailwind é importante?

Eu acredito que ele abre as portas hoje em diversas empresas e ate mesmo para voce simplesmente copiar e colar codigos e vender websites (nao e a discussao do momento tambem), empresas famosas e ate mesmo Edtechs estao comecando a utilizar em tutoriais.

Quais as vantagens de usar Tailwind?

Gosto sempre de trazer 3 pontos e ai vai eles

Rapido para criar Layouts

No Tailwind voce vai encontrar diversos recursos que voce pode simplesmente copiar e colar (de forma gratuita) e simplesmente mudar cores conforme a sua necessidade, o que facilita o desenvolvimento WEB no dia a dia.

Simples instalacao

Ate mesmo com Elixir/Phoenix algo que eu pensei que fosse complicado e simplesmente seguir alguns passos sem muita verbosidade, e inclusive no proprio site ja fornece um tutorial de como instalar em seus projetos.

Facil de utilizar

Voce tem uma documentacao muito boa e didatica. A documentacao de proporciona classes de CSS e com a explicacao de como utilizar e o que contem em cada classe CSS.

Por onde começar?

Voce pode comecar criando um projeto Phoenix.

❯ mix phx.new first_tailwind
Enter fullscreen mode Exit fullscreen mode

Incluir a dependencia no seu projeto em mix.exs.

defp deps do
  [
    {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
  ]
end
Enter fullscreen mode Exit fullscreen mode

Configurar o tailwind em config.exs, onde vai ler, e onde vai ser a saida dos dados.

config :tailwind, version: "3.1.4", default: [
  args: ~w(
    --config=tailwind.config.js
    --input=css/app.css
    --output=../priv/static/assets/app.css
  ),
  cd: Path.expand("../assets", __DIR__)
]
Enter fullscreen mode Exit fullscreen mode

Incluir o Script de Deploy:

defp aliases do
  [
    "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
  ]
]
Enter fullscreen mode Exit fullscreen mode

Instalar o Tailwind

mix tailwind.install
Enter fullscreen mode Exit fullscreen mode

Incluir os modulos de Import em: ./assets/tailwind.config.js

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Incluir os Core componentes do Tailwind em app.css:

ps: Eu costumo deletar o phoenix.css e remover o import, para utilizar somente tailwind, algo que e bem legal de fazer e remover todo o layout default do phoenix e propriedades CSS para nao se perder durante o desenvolvimento

@tailwind base;
@tailwind components;
@tailwind utilities;
import "../css/app.css" (REMOVER)
Enter fullscreen mode Exit fullscreen mode

Testando o tailwind:

#incluir na sua index
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
Enter fullscreen mode Exit fullscreen mode

E inicializar a sua aplicacao.

Como organizar seu App com Tailwind?

O que e muito importante saber do Tailwind e facilitar a criacao do seu APP utilizando dois recursos muito poderoso

1 Apply

Voce pode aplicar o tailwind em suas Tags HTML utilizando o Apply e e muito simples vide o exemplo abaixo:

body{
  @apply bg-zinc-900 text-zinc-100;
  --webkit-font-smoothing: antialiased;
}

form.crud {
  @apply bg-zinc-700 flex flex-col m-10 p-20
}
Enter fullscreen mode Exit fullscreen mode

No exemplo acima eu apliquei um fundo de cor padrao. E nos cruds que faco com o Elixir eu criei meu proprio estilo o que fica facil e nao preciso ficar pensando em muito codigo para meus formularios.

2 Tailwind Configs

Quando voce precisar definir cores, background, fontes padrao com o Tailwind e so voce utilizar o extend definindo as propriedades e o tailwind se encarrega do restante para utilizar com facilidade. Vide o exemplo abaixo:

// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex'
  ],
  theme: {
    extend: {
      backgroundImage: {},
      fontFamily: {
        sans: 'Roboto, sans-sefif',
      },
      colors: {
        elxpro: {
          primary: "#274395",
          secondary: "#3dbfef",
          white: "#fff"
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms')
  ]
}
Enter fullscreen mode Exit fullscreen mode

E para utilizar tanto border, background e text eu to preciso colocar o tipoDePropriedade-NomeDefinidoNasConfigs-propriedadeDaConfig

<li class="border rounded border-elxpro-primary p-1 pl-3 pr-3 ml-1 hover:bg-elxpro-secondary text-sm">
Enter fullscreen mode Exit fullscreen mode

Redes Sociais:

💖 💪 🙅 🚩
postelxpro
Elxpro

Posted on June 30, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

O minimo de Tailwind que voce precisa saber para trabalhar com Elixir/Phoenix
phoenix O minimo de Tailwind que voce precisa saber para trabalhar com Elixir/Phoenix

June 30, 2022