AstonJ

AstonJ

Tailwind News

Just noticed Tailwind 4 has been released:

Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.

  • New high-performance engine — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
  • Designed for the modern web — built on cutting-edge CSS features like cascade layers, registered custom properties with @property, and color-mix().
  • Simplified installation — fewer dependencies, zero configuration, and just a single line of code in your CSS file.
  • First-party Vite plugin — tight integration for maximum performance and minimum configuration.
  • Automatic content detection — all of your template files are discovered automatically, with no configuration required.
  • Built-in import support — no additional tooling necessary to bundle multiple CSS files.
  • CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
  • CSS theme variables — all of your design tokens exposed as native CSS variables so you can access them anywhere.
  • Dynamic utility values and variants — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.
  • Modernized P3 color palette — a redesigned, more vivid color palette that takes full advantage of modern display technology.
  • Container queries — first-class APIs for styling elements based on their container size, no plugins required.
  • New 3D transform utilities — transform elements in 3D space directly in your HTML.
  • Expanded gradient APIs — radial and conic gradients, interpolation modes, and more.
  • @starting-style support — a new variant you can use to create enter and exit transitions, without the need for JavaScript.
  • not-* variant — style an element only when it doesn’t match another variant, custom selector, or media or feature query.
  • Even more new utilities and variants — including support for color-scheme, field-sizing, complex shadows, inert, and more.

Anyone used it yet?

There’s a PragProg book on Tailwind (Modern CSS with Tailwind Book Club!) are there any other Tailwind learning resources worth a look?

Most Liked Responses

l00ker

l00ker

I was pleasantly surprised see that the v4.0 docs now have a Framework Guides section that includes Phoenix - Install Tailwind CSS with Phoenix.

:tada:

16
Post #2
JacobAlexander

JacobAlexander

Unfortunately, Tailwind Framework Guides is incorrect for Phoenix and not working :slight_smile:
You should follow the guide from the forum about beta integration.
And what about v4 ? It is nice, simpler to use because of pure CSS, but also I feel like we lost that simplicity in configuration.

wceolin

wceolin

They’re working on it.

Where Next?

Popular in Discussions Top

jswny
I would like to better understand what the advantages/disadvantages of umbrella applications are compared to structuring your app as as s...
New
Donovan
Hello everyone, I’m so glad to have discovered this awesome community. Thanks for creating it! This is my second post, and apologies for...
New
blackode
Elixir Upgrading is so Simple in Ubuntu and It worked for me Ubuntu 16.04 git clone https://github.com/elixir-lang/elixir.git cd elixir...
New
WolfDan
After doing a port from a c++ library to my project in phoenix I’ve seen that I need a faster way to run this algorithm and I found this ...
New
sashaafm
Piggy backing a bit on @dvcrn topic BEAM optimization for functions with static return type?, I’ve been trying to understand in a deeper ...
New
chuck
Let me start by stating an assumption: Phoenix is a great approach to building REST APIs. There are many reasons for this, but I will ass...
New
marciol
Please, let me know if this kind of discussion already took place in another topic . Hi all, how do you consider if is better to build ...
New
hazardfn
I suppose this question is effectively hackney vs. ibrowse but we are at a point in our project where we have to make a choice between th...
New
tomekowal
Hey guys! I want to create a toy project that shows a chart of temperature over time and updates every 5 seconds. I feel LiveView is per...
New
scouten
I’m looking for a host for the server part of a small (personal) side project that I’m working on. It’s currently written in Node.js and ...
New

Other popular topics Top

marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New

We're in Beta

About us Mission Statement