O minimo de Tailwind que voce precisa saber para trabalhar com Elixir/Phoenix
Tags: phoenix, elixir, programming, beam
Published: 2022-06-30 10:18:53

# 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](https://www.youtube.com/watch?v=0A-ypqCRtSo)

_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](https://tailwindcss.com/)?


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](https://getbootstrap.com/) 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](https://materializecss.com/) 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](https://tailwindcomponents.com/search?query=dashboard).



# 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](https://tailwindcss.com/docs/guides/phoenix)

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


Incluir a dependencia no seu projeto em _mix.exs_.

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

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__)
]
```


Incluir o Script de Deploy:

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

Instalar o Tailwind


```
mix tailwind.install
```


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


```
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  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 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)
```

Testando o tailwind:

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

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
}
```


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')
  ]
}
```

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

```



Redes Sociais: 

- [Gustavo Oliveira](https://www.linkedin.com/in/gustavo-oliveira-642b23aa/)
- [Elxpro(linkedin)](https://www.linkedin.com/company/36977430)
- [Twiter](https://twitter.com/elx_pro)
- [ElxproBr](https://www.youtube.com/channel/UCl_BBK2sXZzQy_3ziNU7-XA)
- [Elxpro](https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ)