TheLazy.Dev
Portfolio GitHub

Blog

phoenix |elixir |beam |programming

The minimum of Tailwind you need to know to work with Elixir/Phoenix

postelxpro

Elxpro

Posted on July 2, 2022

The minimum of Tailwind you need to know to work with Elixir/Phoenix

Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer

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

I am Gustavo and today's theme is: The minimum of Tailwind you need to know to work with Elixir/Phoenix

_ps: You can follow the article with video

Want to learn more about elixir on a Telegram channel?
https://elxpro.com/subscribe-elxcrew

What is Tailwind?

Is a CSS framework that gives you the possibility to create layouts using a ready-made CSS framework. This allows you to optimize the time of creating a UI without having to do everything manually.

How did I discover Tailwind?

I discovered Tailwind when I needed to deliver my project first to a company using Elixir/Phoenix, I was I didn't want to provide the CSS as it would require a lot of time, bootstrap was a great option but when I was looking for free dashboard themes on the internet it was tough to find a theme, look for other options. I even considered the possibility of using MaterializeCss too. Still, I need a layout and paid, we discovered Tailwind and found the control panel layouts easy to use, and simple to install as I needed to import tailwind and copy and paste HTML from a website TailwindComponents.

When was the first time you put it into production?

That was about 4 years ago, the experience was interesting, because it was easy not to worry about creating layouts, and at the time, tailwind didn't have the number of resources that it does today.

Today, you can enter tailwind component, and tailwindUI, among other sites, and find incredible content that is easy to adapt to what you need. Coming back to the feature, at that time excellent, mobile-friendly, including for a short period that had a lot of features for your customers to experience and would provide a great experience for my customers in a short time.

The interesting thing that had doors to have projects was the one that this project took codes but what it was and the project opened the exterior for me because I care about projects, which made it easier for me to go outside Brazil using the famous PETAL stack (I don't like the alpine and people I've been working with also say the same but that's not the focus of this conversation) :D

Why is Tailwind important?

I believe it opens doors today in many companies and even for you to simply copy and paste codes and sell websites (not the current discussion either), famous companies and even Edtechs are starting to use tutorials.

What are the advantages of using Tailwind?

I always like to bring 3 points and there they go

Quick to create Layouts

In Tailwind, you will find several resources that you can simply copy and paste (free of charge) and simply change the cores as needed, which facilitates the WEB development daily.

Simple Installation

Even with Elixir/Phoenix something that I simply installed that was complicated and easy to follow the steps without much verbosity, and even the website itself has already provided a tutorial on how to follow in your projects.

Ease of use

You have very good and didactic documentation. Documentation providing CSS classes and an explanation of how to use and what each CSS class contains.

Where to start?

You can start by creating a Phoenix project.

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

Add a dependency to your project on mix.exs.

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

Configure tailwind in config.exs, where it will read, and where it will output the data.

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

Include the Deploy Script:

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

Install Tailwind

mix tailwind.install
Enter fullscreen mode Exit fullscreen mode

Include the import modules in: ./assets/tailwind.config.js

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

Include Tailwind's Core components in app.css:

ps: I usually delete the phoenix.css and remove the import, to use only tailwind, something that's pretty cool to do, and remove all the default phoenix layout and CSS properties so you don't get lost during development

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

Testing the tailwind:

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

And initialize your application.

How to organize your App with Tailwind?

What is very important to know about Tailwind and make it easy to create your APP using two very advanced features

1 Apply

You can apply tailwind to your HTML Tags using Apply and it's very simple, see the example below:

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

In the example above I applied a default color background. And in the cruds I do with Elixir I cried my easy style and I don't have to think about a lot of code for my forms.

2 Tailwind Settings

When you need cores, background, and pading fonts with you use tend setting properties and tailwind setting how to set as a remainder and easily to use with ease. See the example below:

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

And to use both border, background and text I need to put PropertyType-DefinNameInConfigs-ConfigProperty

<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

Social networks:

💖 💪 🙅 🚩
postelxpro
Elxpro

Posted on July 2, 2022

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

Sign up to receive the latest update from our blog.

Related

The minimum of Tailwind you need to know to work with Elixir/Phoenix
phoenix The minimum of Tailwind you need to know to work with Elixir/Phoenix

July 2, 2022