The minimum of Tailwind you need to know to work with Elixir/Phoenix
Tags: phoenix, elixir, beam, programming
Published: 2022-07-02 11:00:12

# 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](https://www.youtube.com/watch?v=6ZxtdayOe40)**

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


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


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

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


Add a dependency to your project on _mix.exs_.


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

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


Include the Deploy Script:


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

Install Tailwind


```
mix tailwind.install
```

Include the import modules in: _./assets/tailwind.config.js_

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


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


Testing the tailwind:


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

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


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


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

```


Social networks:

- Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
- Elxpro -  https://www.linkedin.com/company/36977430
- Twitter - https://twitter.com/elx_pro
- Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ