Tailwind 3.3 - more colors, TypeScript friendly
Tags: tailwindcss, beginners, tutorial, vue
Published: 2023-03-29 13:07:04

 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 `&shy;` tag

```
<p class="ms-10 w-20 hyphens-manual">
  pneumo&shy;noultra&shy;microscopic&shy;silico&shy;volcanoco&shy;niosis
</p>
```
 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gn1dn453bqlbuc94hp3.png)

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](https://github.com/Divewitholeg/Tailwind-3.3.git) and experiment by yourself.