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

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

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

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.

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 period uma otima opcao mas quando procurava por temas de dashboards gratuitos na web 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 format 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 web site chamado TailwindComponents.

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 web sites 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) 😀

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

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.

Ate mesmo com Elixir/Phoenix algo que eu pensei que fosse complicado e simplesmente seguir alguns passos sem muita verbosidade, e inclusive no proprio web 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 lessons de CSS e com a explicacao de como utilizar e o que contem em cada classe CSS.

Voce pode comecar criando um projeto Phoenix.

❯ combine phx.new first_tailwind       

Incluir a dependencia no seu projeto em combine.exs.

defp deps do
  [
    {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
  ]
finish

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

config :tailwind, model: "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__)
]

Incluir o Script de Deploy:

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

Instalar o Tailwind

combine tailwind.set up

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

module.exports = {
  content material: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    prolong: {},
  },
  plugins: [],
}

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 authorized de fazer e remover todo o format default do phoenix e propriedades CSS para nao se perder durante o desenvolvimento

@tailwind base;
@tailwind elements;
@tailwind utilities;
import "../css/app.css" (REMOVER)

Testando o tailwind:

#incluir na sua index
<h1 class="text-3xl font-bold underline">
  Good day world!
</h1>

E inicializar a sua aplicacao.

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:

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

type.crud {
  @apply bg-zinc-700 flex flex-col m-10 p-20
}

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 prolong definindo as propriedades e o tailwind se encarrega do restante para utilizar com facilidade. Vide o exemplo abaixo:

// See the Tailwind configuration information for superior utilization
// https://tailwindcss.com/docs/configuration
module.exports = {
  content material: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex'
  ],
  theme: {
    prolong: {
      backgroundImage: {},
      fontFamily: {
        sans: 'Roboto, sans-sefif',
      },
      colours: {
        elxpro: {
          major: "#274395",
          secondary: "#3dbfef",
          white: "#fff"
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms')
  ]
}

E para utilizar tanto border, background e textual content 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">

Redes Sociais: