This content originally appeared on Bits and Pieces - Medium and was authored by Oleg Rybnikov
Tailwind 3.3 — More Colors and Support for TypeScript
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 the 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 the new features of the new Tailwind version, I haven’t done it and voila, a 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!
💡 You can further improve your workflow by using an open-source toolchain such as Bit to use and reuse your Tailwind components across multiple projects and thereby maintain a highly composable and easy-to-scale UI component library.
Learn more here:
Building a Composable UI Component Library
You can save some time by cloning my Tailwind project on GitHub.
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- Creating a Developer Website with Bit components
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
- How to Reuse and Share React Components in 2023: A Step-by-Step Guide
What’s New in Tailwind 3.3? was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Oleg Rybnikov
Oleg Rybnikov | Sciencx (2023-04-06T11:38:11+00:00) What’s New in Tailwind 3.3?. Retrieved from https://www.scien.cx/2023/04/06/whats-new-in-tailwind-3-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.