Get ready to spice up your web development game with the latest release of Tailwind CSS v3.3! This update brings a deliciously extended color palette to satisfy even the most discerning designer's cravings. But that's not all - feast your eyes on the new ESM/TS support that'll make your workflow smoother than butter. And, as if that weren't enough, you can now indulge in the savory goodness of logical properties and other mouth-watering features that'll take your website to the next level. Don't miss out on this delectable upgrade - your taste buds (and clients) will thank you!
First thing let's upgrade the existing version of Tailwind for the latest one:
npm install -D tailwindcss@latest
Darker -950 shades are now added for every color:
<span class="font-bold text-slate-950">-950 shades</span>
With the new version you can generate a TS (or ESM) config file
npx tailwindcss init --ts
For those using RTL and LTR language options life becomes easier with ms-3 (margin start) and me-3 (margin end) tags. Same properties were added to start-, end-, padding, rounded, border and scroll.
<div class="group flex items-center">
<div class="me-3">
<p class="text-sm font-medium text-slate-700">أوليج ريبنيكوف</p>
<p class="text-sm font-medium text-slate-500">مطور ويب</p>
</div>
<img
class="shrink-0 h-12 w-12 rounded-full"
src="@/assets/Oleg.jpg"
alt="Oleg Rõbnikov Web Development logo"
/>
<div class="ms-3">
<p class="text-sm font-medium text-slate-700">Oleg Rõbnikov</p>
<p class="text-sm font-medium text-slate-500">Web developer</p>
</div>
</div>
New controls were added to make gradient stop positions more precise with from-10%, via-35%, etc. You can find more information about new features of color gradient stops in documentation
class="bg-gradient-to-r from-rose-400 from-30% via-fuchsia-500 via-60% to-indigo-500 to-90% h-10 w-300"
Line-clamp isn't used as a plugin anymore. You can just use it as, e.g. line-clamp-2 class!
Line-height and font-size have been combined into a single class, e.g. 'font-lg/7' and also supports arbitrary values like 'font-xl/[17]'
Color variables are now supported in the class arguments without var prefix. Try to hover over me!
style="--brandColor: #e500ff; --hoverBrandColor: #000000"
class="text-[--brandColor] hover:text-[--hoverBrandColor]"
Extended options for the font family include fontVariationSettings besides fontFeatureSettings that used to be there already. Both of them are accessible in tailwind.config.ts. Please don't forget to upgrade your TS to v.5 and PostCSS to v.8.4. As I was impatient to try out all new features of new Tailwind version, I haven't done it and voila, couple of new features weren't performing well. So, please, don't forget to upgrade your dependencies.
module.exports = {
theme: {
fontFamily: {
sans: [
'Inter var, sans-serif',
{
fontFeatureSettings: '"cv11", "ss01"',
fontVariationSettings: '"opsz" 32',
},
],
},
},
}
Another nifty feature is ability to customize your list bullet immages as list-image-*.
<ul class="ms-14 list-image-[url('/logo.png')]">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
hyphens-manual allows you to add a custom breaking point for long words like pneumonoultramicroscopicsilicovolcanoconiosis. It's done with the help of ­ tag
<p class="ms-10 w-20 hyphens-manual">
pneumo­noultra­microscopic­silico­volcanoco­niosis
</p>
Table caption can now be aligned to top or bottom of the table using a single class caption-*
In conclusion, Tailwind CSS version 3.3 has numerous new features like a redesigned docs site, CSS Grid support, and the ability to customize the font families used in your project. The update also includes numerous bug fixes and performance improvements. If you're a web developer looking to streamline your workflow and build beautiful, responsive websites faster than ever, give Tailwind CSS a try and experiment with these new features today!
Feel free to download my
GitHub project and experiment by yourself.
Top comments (0)