The minimal of Tailwind that you must know to work with Elixir/Phoenix

Howdy #devElixir!!! Welcome to #FullStackElxpro

Right here we focus on methods and suggestions on your Elixir studying journey. That is from scratch till your first wave as an elixir developer

I’m Gustavo and right this moment’s theme is: The minimal of Tailwind that you must know to work with Elixir/Phoenix

_ps: You’ll be able to observe the article with video

Need to be taught extra about elixir on a Telegram channel?
https://elxpro.com/subscribe-elxcrew

Is a CSS framework that offers you the chance to create layouts utilizing a ready-made CSS framework. This lets you optimize the time of making a UI with out having to do every part manually.

I found Tailwind after I wanted to ship my mission first to an organization utilizing Elixir/Phoenix, I used to be I did not need to present the CSS as it could require lots of time, bootstrap was an awesome possibility however after I was in search of free dashboard themes on the web it was robust to discover a theme, search for different choices. I even thought-about the opportunity of utilizing MaterializeCss too. Nonetheless, I would like a format and paid, we found Tailwind and located the management panel layouts simple to make use of, and easy to put in as I wanted to import tailwind and replica and paste HTML from an internet site TailwindComponents.

That was about 4 years in the past, the expertise was fascinating, as a result of it was simple to not fear about creating layouts, and on the time, tailwind did not have the variety of assets that it does right this moment.

At present, you’ll be able to enter tailwind element, and tailwindUI, amongst different websites, and discover unbelievable content material that’s simple to adapt to what you want. Coming again to the characteristic, at the moment glorious, mobile-friendly, together with for a brief interval that had lots of options on your prospects to expertise and would supply an awesome expertise for my prospects in a short while.

The fascinating factor that had doorways to have tasks was the one which this mission took codes however what it was and the mission opened the outside for me as a result of I care about tasks, which made it simpler for me to go outdoors Brazil utilizing the well-known PETAL stack (I do not just like the alpine and folks I have been working with additionally say the identical however that is not the main focus of this dialog) 😀

I imagine it opens doorways right this moment in lots of corporations and even so that you can merely copy and paste codes and promote web sites (not the present dialogue both), well-known corporations and even Edtechs are beginning to use tutorials.

I all the time prefer to deliver 3 factors and there they go

Fast to create Layouts

In Tailwind, you can find a number of assets that you may merely copy and paste (freed from cost) and easily change the cores as wanted, which facilitates the WEB improvement each day.

Even with Elixir/Phoenix one thing that I merely put in that was sophisticated and straightforward to observe the steps with out a lot verbosity, and even the web site itself has already offered a tutorial on tips on how to observe in your tasks.

Ease of use

You might have excellent and didactic documentation. Documentation offering CSS lessons and a proof of tips on how to use and what every CSS class comprises.

You can begin by making a Phoenix mission.

❯ combine phx.new first_tailwind       

Add a dependency to your mission on combine.exs.

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

Configure tailwind in config.exs, the place it’ll learn, and the place it’ll output the information.

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

Embrace the Deploy Script:

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

Set up Tailwind

combine tailwind.set up

Embrace the import modules in: ./belongings/tailwind.config.js

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

Embrace Tailwind’s Core parts in app.css:

ps: I often delete the phoenix.css and take away the import, to make use of solely tailwind, one thing that is fairly cool to do, and take away all of the default phoenix format and CSS properties so you aren’t getting misplaced throughout improvement

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

Testing the tailwind:

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

And initialize your software.

What is essential to find out about Tailwind and make it simple to create your APP utilizing two very superior options

1 Apply

You’ll be able to apply tailwind to your HTML Tags utilizing Apply and it is quite simple, see the instance under:

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
}

Within the instance above I utilized a default coloration background. And within the cruds I do with Elixir I cried my simple fashion and I haven’t got to consider lots of code for my types.

2 Tailwind Settings

While you want cores, background, and pading fonts with you utilize have a tendency setting properties and tailwind setting tips on how to set as a the rest and simply to make use of with ease. See the instance under:

// 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: {
          main: "#274395",
          secondary: "#3dbfef",
          white: "#fff"
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms')
  ]
}

And to make use of each border, background and textual content I must 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: