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
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:
Top comments (0)