Exciting updates in Tailwind v�
Browse:663
Several months ago (at the time of writing), Tailwind CSS open-sourced its work on Tailwind CSS v4.0. (You can find it on GitHub here).
Recently, Tailwind announced a public beta for Tailwind CSS 4, and in this article I'll cover the highlights of the new version. So let's get started!
General Structure Changes
Tailwind has undergone a rework of its engine that drastically improves performance. Full builds are up to 5x faster, incremental builds up to 100x (you read that right) faster.
Tailwind v4 also has a unified toolchain. Remember having to install autoprefixer and postcss in all of your Tailwind projects? You won't have to anymore!
Taking an interesting approach to configuration, Tailwind is moving from JS config files to CSS config. This means you will configure plugins, themes, and other behavior directly in your CSS.
Tailwind is also getting support for the latest features in CSS.
CSS has a new logo (and new features)! ?
Best Codes ・ Nov 23
Now, with the general changes out the way, let's see what specifically Tailwind is adding!
New Features ?
If you want to try Tailwind v4, view the getting started docs for v4 (beta).
If you want to easily upgrade your project, just run npx @tailwindcss/upgrade@next and Tailwind will do it for you. Be careful! There may be breaking changes.
Colors
The Tailwind v4 color palette is based on oklch instead of rgb. The RGB color system is a bit limiting in terms of consistency across screens and vibrancy. Since the oklch color system is now widely supported, Tailwind v4 is going to take advantage of it!
Container queries
Tailwind v4 now supports container queries by default. If you don't know what container queries are, let me explain.
You know things in Tailwind like md:, sm:, etc. that allow you to customize what CSS is applied on different screen sizes?
In those cases, the classes refer to the size of a window. With container queries, they can refer to the size of a container instead.
In the above example, the grid will have 3 columns — not when the window reaches the small size, but when the container does. As you can imagine, this is super handy in responsive layouts.
Field sizing
field-sizing isn't a universally supported CSS feature yet, but it's going to be awesome when it is! Instead of needing JS to create auto-resizing textareas, you can use CSS only.
And Tailwind v4 supports it!Try out the demo on Tailwind's website.
You can now simply add the field-sizing-content class to your textarea to use it.Descendant updates
Tailwind stable (you may not know this) has an * variant that allows you to target direct children of an element with a class. For example:
The new ** variant in Tailwind v4 will target all descendants:
Inset shadows (and rings)
It will also now be easy to create inset shadows and rings on elements using the inset-shadow and inset-ring classes.
-
Can Go Access the Initial Standard Input Stream?In Go, Can You Access Initial Standard Input?In Go, using os.Stdin to read from the original standard input should yield the desired results, as demon...Programming Published on 2024-12-23 -
Beyond `if` Statements: Where Else Can a Type with an Explicit `bool` Conversion Be Used Without Casting?Contextual Conversion to bool Allowed Without a CastYour class defines an explicit conversion to bool, enabling you to use its instance 't' di...Programming Published on 2024-12-23
-
How do I combine two associative arrays in PHP while preserving unique IDs and handling duplicate names?Combining Associative Arrays in PHPIn PHP, combining two associative arrays into a single array is a common task. Consider the following request:Descr...Programming Published on 2024-12-23
-
What Happened to Column Offsetting in Bootstrap 4 Beta?Bootstrap 4 Beta: The Removal and Restoration of Column OffsettingBootstrap 4, in its Beta 1 release, introduced significant changes to the way column...Programming Published on 2024-12-23
-
A minimalist password manager desktop app: a foray into Golang&#s Wails framework (Part 2)Hi again, coders! In the first part of this short series we saw the creation and operation of a desktop application to store and encrypt our passwords...Programming Published on 2024-12-23
-
ES6 React Components: When to Use Class-Based vs. Functional?Deciding Between ES6 Class-Based and Functional ES6 React ComponentsWhen working with React, developers face the choice between utilizing ES6 class-ba...Programming Published on 2024-12-23
-
How Can I Find the Unique Values Between Two Flat Arrays in PHP?Finding Unique Values Between Flat ArraysGiven two arrays, the task is to determine the values that exist only in one of them. This operation is commo...Programming Published on 2024-12-23
-
How Can I Find Users with Today\'s Birthdays Using MySQL?How to Identify Users with Today's Birthdays Using MySQLDetermining if today is a user's birthday using MySQL involves finding all rows where ...Programming Published on 2024-12-23
-
Using WebSockets in Go for Real-Time CommunicationBuilding apps that require real-time updates—like chat applications, live notifications, or collaborative tools—requires a communication method faster...Programming Published on 2024-12-23
-
Can CSS Natively Insert a Line Break Within Inline-Block Elements?CSS Insertion of Line Breaks Within inline-block Elements: A Theoretical ExplorationIn the ever-evolving landscape of web development, the ability to ...Programming Published on 2024-12-23
-
How to Effortlessly Convert Time and Date Between Time Zones in PHP?Converting Time and Date between Time Zones in PHPWith PHP, you can effortlessly convert time and dates between different time zones. This capability ...Programming Published on 2024-12-23
-
How to Install and Use Pip for Python Package Management on Windows?Pip: A Hassle-Free Way to Install Python Packages on WindowsInstalling Python packages on Windows can be a daunting task, especially if you're enc...Programming Published on 2024-12-23
-
How to Choose Between Python's `type()` and `isinstance()` for Object Type Checking?How to Determine the Type of an ObjectDetermining the type of an object is crucial for ensuring data consistency and performing operations accordingly...Programming Published on 2024-12-23
-
Is There a Wildcard Method for Element Name Matching in JavaScript\'s \"querySelector()\" and \"querySelectorAll()\"?wildcard Element Name Matching with "querySelector()" and "querySelectorAll()" in JavaScriptProblem:Querying an XML document with ...Programming Published on 2024-12-23
-
Why Does My Go App Get "Recv failure: Connection reset by peer" When Running in a Docker Container?Docker Port Exposure Issue: Resolving "Recv failure: Connection reset by peer"Upon attempting to run a Go app binary within a Docker contain...Programming Published on 2024-12-23
Study Chinese
- 1 How do you say "walk" in Chinese? 走路 Chinese pronunciation, 走路 Chinese learning
- 2 How do you say "take a plane" in Chinese? 坐飞机 Chinese pronunciation, 坐飞机 Chinese learning
- 3 How do you say "take a train" in Chinese? 坐火车 Chinese pronunciation, 坐火车 Chinese learning
- 4 How do you say "take a bus" in Chinese? 坐车 Chinese pronunciation, 坐车 Chinese learning
- 5 How to say drive in Chinese? 开车 Chinese pronunciation, 开车 Chinese learning
- 6 How do you say swimming in Chinese? 游泳 Chinese pronunciation, 游泳 Chinese learning
- 7 How do you say ride a bicycle in Chinese? 骑自行车 Chinese pronunciation, 骑自行车 Chinese learning
- 8 How do you say hello in Chinese? 你好Chinese pronunciation, 你好Chinese learning
- 9 How do you say thank you in Chinese? 谢谢Chinese pronunciation, 谢谢Chinese learning
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
