DEV Community

vuewebdev
vuewebdev

Posted on

Tailwind 3.3 - more colors, TypeScript friendly

#vue #tailwindcss #tutorial #beginners

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
Enter fullscreen mode Exit fullscreen mode

Darker -950 shades are now added for every color:

<span class="font-bold text-slate-950">-950 shades</span>
Enter fullscreen mode Exit fullscreen mode

With the new version you can generate a TS (or ESM) config file

npx tailwindcss init --ts
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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]"
Enter fullscreen mode Exit fullscreen mode

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',
        },
      ],
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

hyphens-manual allows you to add a custom breaking point for long words like pneumonoultramicroscopicsilicovolcanoconiosis. It's done with the help of &shy; tag

<p class="ms-10 w-20 hyphens-manual">
  pneumo&shy;noultra&shy;microscopic&shy;silico&shy;volcanoco&shy;niosis
</p>
Enter fullscreen mode Exit fullscreen mode

Table caption can now be aligned to top or bottom of the table using a single class caption-*

Table caption can now be aligned to top or bottom

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)