CSS

What's new in Tailwind CSS 3?

Sep 1, 2022

3 min read

Introduction

Tailwind CSS has become a very popular CSS framework recently and is loved by developers the world over. It helps developers be more productive, ship incredibly tiny CSS files and focus on one file for each component instead of jumping between several files.

Tailwind CSS v3

Tailwind CSS v3 was released at the end of 2021, and it has even more cool features.

Just-In-Time Engine

"Just-in-time", or @tailwindcss/jit, is a new faster engine to work with on the development mode. Before Tailwind CSS 3, the production was adding every class you may need to the development CSS bundle, and at the end, you would end up with a giant CSS file that could be 15 to 20 MB.

The new engine is so much faster. It detects all the classes that you use, and it will update the output file live, so it takes only a few milliseconds to fire up the server.

Scroll Snap API

Scroll snap is a new feature in CSS that sets how strictly snap points are enforced on the scroll container in case there is one. Tailwind CSS 3 has some new classes to handle that in a very simple way like for:

Scroll behavior: we have to classes scroll-smooth and scroll-auto
Scroll margin: use the scroll-{margin class} like scroll-m-2 or scroll-my-4
Scroll padding: exactly like scroll margin it’s scroll-{padding class}
Scroll snap align: it’s used to snap every element to a specific direction on scroll like span-start, snap-end and snap-center
Scroll snap stop: it used to force a snap container to always stop/ not stop on an element before the user can continue scrolling to the next item. They are snap-always and snap-normal.
scroll snap type: it used to control how strictly snap points are enforced in a snap container like snap-none, snap-x, snap-y, snap-both etc

More Colors

The new version contains new 8 colors: sky, blue, indigo, violate, purple, fushia, pink, and rose. So the total now is 15 colors!

Colored Box Shadows

This is a cool feature you can use the shadow utility shadow-{color}. And we can also change the opacity of the box shadow by using the utility shadow-{color}/{opacity} like:

<div class=”shadow-xl shadow-rose-500/30”>
Some content
</div>

Print Modifier

It’s a new feature that allows you to control how the page will look when people print it like:

<div class="print:hidden">
   This will be hidden when you print the page!
</div>
<div class="hidden print:block">
    This will be hidden in the browser but will be visible when you print the page!
</div>

Colored Underline Styles

Also it has new text decoration utility classes to make fancy underline styles to change the text decoration’s color, style, thickness, and offset. These are used to extend the decoration of a text by styling the underline like decoration-{color} is used to set the text underline color and decoration-{solid | double | dotted | dashed | wavy} used to change the text underline’s style.

Multi-Column Layout

Tailwind CSS 3 supports colums. It’s a new way to handle the layouts, and it’s very useful in things like for example, footer:

<footer class="columns-1 md:columns-4 ...">
  ...
</footer>

Modern Aspect Ratio API

Use the aspect-{ratio} utilities to set the desired aspect ratio of an element like aspect-auto, aspect-square, or aspect-video.

RTL and LTR Modifiers

Also, we have two new modifiers ltr and rtl to provider good user experience in multidirectional websites. You can use them, like:

<div class=”ltr:bg-red”>
…
</div>

<div class=”rtl:mr-8”>
…
</div>

Portrait and Landscape Modifiers

Also, we have new modifiers that give us more control over the page, like:

<div class=”portrait:hidden”>
Hello from landscape!
</div>

<div class=”landscape:hidden”>
Please rotate your device!
</div>

Wrap Up

Thanks for checking out my blog on the latest updates to Tailwind CSS 3. I hope that this will help guide you as you play around with the newest features! Of course, if you want any further clarification, you can reach out to me on Twitter!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Mark Shenouda

@MarkSShenouda @markshenouda

Introducing the New Nuxt 2 - Pinia - Tailwind Kit in Starter.dev

*Starter.dev is an open source community resource developed by This Dot Labs that provides code starter kits in a variety of web technologies, including React, Angular, Vue, etc. with the hope of enabling developers to bootstrap their projects quickly without having to spend time configuring tooling. We ship starter kits with showcases to demonstrate how to best utilize these kits, and structure more complex projects.* --- We are excited to announce our new starter.dev kit: a Nuxt 2 kit with Pinia as the state manager, and Tailwind for the styling. Ok, you might be thinking: "Why should I use a Nuxt 2 kit if Nuxt 3 is just around the corner?" Well, although Nuxt 2 is indeed in just maintenance mode by now, it is the most stable Nuxt version out there, and it is still really powerful, and a great framework for you next app. If you want to build a scalable and stable project, you might want to build it in this version! Ok, without any further ado, let’s see what this kit is all about, and how you can use it in your next application! Lets first talk about our technological options. Nuxt So why Nuxt.js? Lets kick off explaining what Nuxt.js actually is, and why we decided to create a kit with this technology. Nuxt is a framework built on top of Vue. It helps you handle complex configuration with an easy command-line setup, such as asynchronous routing with middlewares, great SEO using SSR, automatic code-splitting, auto imports and many more. It also brings its own features, such as build-in components, different ways for getting data from an API, 2 rendering methods (Server-side or Static sites), and even its own loader, transitions, and animations. At first, you might find Nuxt a bit challenging. For example, if you have never used SSR before, it takes time to get used to it, and you will have to change your mindset from Vue as they handle logic quite differently. But we think all that effort will be worth it, because we think Nuxt is a great framework for your next application. It can make your development experience more gratifying and faster, and your site more SEO friendly. Pinia Lets now dive in into the state management library that we choose. As stated from the previous official library Vuex, Pinia is now the default state management library for Vue. When sharing global state within your application, you want it to be secure and easy to use, especially if you are using SSR as we are more likely doing with Nuxt. Pinia is pretty good at helping us with those matters. Using Pinia with Nuxt 2 is a bit tricky but nothing crazy. You just need to install an extra package in order to use Composition-API inside Nuxt 2, make some config adjustments, and then you are good to go! Tailwind Tailwind is a great utility-first CSS framework that helps you build websites more quickly. Nuxt helps us set up Tailwind from scratch pretty easily when creating our project from the command-line. It does the config setups, and also installs the packages we need in order to start using it. What’s inside the Nuxt 2 Kit? Our main goal when creating a starter.dev kit is to provide the essential things for your project without adding too much configuration to make them as flexible as possible. The kit includes two main components. The first one is a counter component, managing the state with a Pinia store and a Fetch component showing how data can be fetched inside Nuxt 2. Both of these components have their own Storybook component, and a test component written with testing library and MSW. These are basic examples to demonstrate how you can utilize these technologies together. The kit also includes ESlint, Prettier and Husky basic configurations. Also, the whole kit is written in TypeScript, which includes configuration within the kit as well. Our goal here is to save you all that time that it would take to get all these tools configured properly when starting a new project. How do I use the kit? With our starter.dev CLI! Of course there are other methods, but this one is for sure the easiest one. Just run the command npx @this-dot/create-starter. After running this command, a list of available starter.dev kits will show up. Of course you can select the best one that fits your needs. In this case, it will be the nuxt2-pinia-tailwind one! It will ask for the name of your new project, and once that is written down, the CLI will start to prepare the kit for you! Now that the kit is installed, you can cd into your new project directory with the name you provided before, and then start coding! Oh, but don’t forget to install the dependencies needed with your package manager of choice (I recommend pnpm 🫣). Take a look at https://starter.dev/kits/nuxt2-pinia-tailwind/ so you can have a deeper view of the kit! Where you can read the README.md file for more detailed documentation, as well as looking at the source code, don't forget to read the package.json file to see the scripts available for the kit. Happy coding!...

Dec 14, 2022

4 mins

Tailwind CSSNuxtJSVue

Introducing the New SolidJS and Tailwind CSS Starter Kit

We are delighted to announce our SolidJS + Tailwind Starter Kit on Starter.dev to help you build your next project with SolidJS and Tailwind CSS in no time. In this article, we will walk you through the kit, and how it is a great option for building your next project. This kit has been designed to build tiny and optimized web applications on both the JavaScript and CSS sides. It's very useful when the load time of your application's files is critical, like when the internet connection is slow or when you are building a mobile application for a targeted audience. Why SolidJS? SolidJS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you build web applications using a declarative API that you’re already familiar with. It’s a great alternative to React, Vue, and other popular JavaScript frameworks. It’s also a great choice for building static sites. The best feature of SolidJS is how tiny its build bundles are. It helps you ship less JavaScript to the browser. Why Tailwind CSS? Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It makes it easy to build complex UIs without having to write custom CSS. And the best feature of Tailwind CSS is how customizable it is. It helps you ship a very small CSS file to the browser. --- Starter Kit Features - SolidJS - A declarative, efficient, and flexible JavaScript library for building user interfaces. - Tailwind CSS - A utility-first CSS framework for rapidly building custom user interfaces. - Vite - A build tool that aims to provide a faster and leaner development experience for modern web projects. - Storybook - An open-source tool for developing UI components in isolation for React, Vue, and Angular. - Vitest - A fast and simple test runner for Vite. - TypeScript - A typed superset of JavaScript that compiles to plain JavaScript. Tailwind CSS Tailwind CSS makes it easy to build complex UIs without having to write custom CSS. The best feature of Tailwind CSS is how customizable it is. It helps you ship a very small CSS file to the browser. Also, Tailwind CSS is great at scale, so you can add as many utilities as you want. Storybook Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and others. It makes building stunning UIs organized and efficient. It also helps you build components faster, and reuse them in your projects. It also helps you document your components. This kit comes with Storybook pre-configured. You can start using it right away. Why Vite? Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It's a great alternative to Webpack. It's fast and easy to use. It also helps you ship less JavaScript to the browser. It's a great choice for building static sites. This kit comes with Vite pre-configured. You can start using it right away. Testing This kit comes with Vitest pre-configured. Vitest is a tool that is built with Vite in mind from the start, taking advantage of its improvements in DX, like its instant Hot Module Reload (HMR). This is Vitest, a blazing fast unit-test framework powered by Vite. It's a great alternative to Jest. It's fast and easy to use. How to get started? - Run npx @this-dot/create-starter to start a new project from one of the kits in the Starter CLI library. - Select the SolidJS, Tailwind kit from the CLI library options - Name your project - cd into your project directory and install dependencies using the tool of your choice (npm, yarn or pnpm) - Copy the contents of the .env.example file into a .env file When to use this kit? This kit is a great alternative to React and SCSS. It focuses on performance and developer experience by providing a fast and leaner development experience for modern web projects. It also helps you write less CSS, and less JavaScript. Options to scale the kit to fit your needs In this section, we will walk you through the options you have to scale the kit even further to fit your needs. We didn't want to add too many options to the kit in order to keep it simple and easy to use, but we also wanted to provide you with the ability to scale the kit. PWA PWA is a great way to make your app available offline, and installable on mobile devices. It caches your app's assets to make it load faster. It also helps you build a great user experience, and increase your app's engagement by providing push notifications. If you want to add PWA support to the kit, you can use the PWA Vite Plugin to add PWA support to the kit. It covers the PWA integrations for Vite, and the ecosystem with zero-configuration and is framework-agnostic. Conclusion So as we discussed in this article this SolidJS starter kit is a great way to start your new SolidJS project because it has most of the tools you need installed and preconfigured for you from Storybook to Testing, and even the PWA configurations. We hope you enjoyed this article, and we hope you will enjoy using the kit. If you have any questions or suggestions, please feel free to reach out to us on Twitter or Contact form....

Apr 7, 2023

4 mins

SolidJSTailwind CSS

Redux Toolkit 2.0 release

Intro Redux Toolkit On December 4, 2023, Mark Erikson announced that Redux Toolkit 2.0 has been released! This change is considered a major version of the library and comes with breaking changes because, as the core team declared, it has been 4+ years since they released Redux tool kit, and they needed to clean up the code and standardize the way Redux apps are written. One of these changes is you no longer need to import the core redux library, RTK is a wrapper of it. In this article, we are going to focus on the main breaking changes and new features in RTK 2.0 Some general notes on the change * Standalone getDefaultMiddleware and getType removed * The package definitions now include an exports field to specify which artifacts to load, with a modern ESM build * UMD has been dropped * Typescript rewrite createSlice and createReducer One of the major changes is object syntax for createSlice.extraReducers and createReducer removed. In RTK 2.0, Redux team has opted to remove the 'object' form for createReducer and createSlice.extraReducers, as the 'builder callback' form offers greater flexibility and is more TypeScript-friendly, making it the preferred choice for both APIs So an example like this: ` Should be like this: ` Middlewares Now the configureStore.middleware must be a callback. That’s because before to add a middleware to the Redux store, you had to add it to the array of configureStore.middleware, but this is turning off the default middleware. Now it’s a callback function that should return an array with middlewares, the default middleware is being passed in the parameters of the callback function so the developer can include it or not in the middleware array like this: ` Enhancers Store enhancers are a formal mechanism for adding capabilities to Redux itself like adding some additional capabilities to the store. It could change how reducers process data, or how dispatch works. Most people will never need to write one. But similar to the middlewares, enhancers also must be a callback function that receives getDefaultEnhancers and should return enhancers back. ` autoBatchEnhancer In version 1.9.0, the Redux team introduced a new autoBatchEnhancer that, when multiple "low-priority" actions are dispatched consecutively. This enhancement aims to optimize performance by reducing the impact of UI updates, typically the most resource-intensive part of the update process. While RTK Query automatically marks most of its internal actions as "low-pri" users need to add the autoBatchEnhancer to the store for this feature to take effect. To simplify this process, configureStore has been updated to include the autoBatchEnhancer in the store setup by default, allowing users to benefit from improved performance without manual store configuration adjustments. AnyAction and UnknownAction The Redux TS types have historically exported an AnyAction type that lacks precise type safety, allowing for loose typology like console.log(action.whatever). However, to promote safer typing practices, they've introduced UnknownAction, which treats all fields beyond action.type as unknown, nudging users towards creating type guards with assertions for better type safety when accessing action objects. UnknownAction is now the default action object type in Redux, while AnyAction remains available but deprecated. RTK Query behavior They've addressed issues with RTK Query, such as problems with dispatch(endpoint.initiate(arg, {subscription: false})) and incorrect resolution timing for triggered lazy queries, by reworking RTKQ to consistently track cache entries. Additionally, they've introduced internal logic to delay tag invalidation for consecutive mutations, controlled by the new invalidationBehavior flag on createApi, with the default being 'delayed'. In RTK 1.9, the subscription status has been optimized syncing to the Redux state for performance, primarily for display in the Redux DevTools "RTK Query" panel. Conclusion This version is a major version of Redux Toolkit and it has a lot of breaking changes but what is important its source code has been cleaned and rewritten in TS will improve the developer experience for sure and on the final user experience as well, We discussed here only the headlines and the most used features but of course you can find all of the changes on The official Redux Github Releases page...

Mar 8, 2024

3 mins

ReduxJavaScript

End-to-end type-safety with JSON Schema

End-to-end type-safety with JSON Schema I recently wrote an introduction to JSON Schema post. If you’re unfamiliar with it, check out the post, but TLDR: It’s a schema specification that can be used to define the input and output data for your JSON API. In my post, I highlight many fantastic benefits you can reap from defining schemas for your JSON API. One of the more interesting things you can achieve with your schemas is end-to-end type safety from your backend API to your client application(s). In this post, we will explore how this can be accomplished slightly deeper. Overview The basic idea of what we want to achieve is: * a JSON API server that validates input and output data using JSON Schema * The JSON Schema definitions that our API uses transformed into TypeScript types With those pieces in place, we can achieve type safety on our API server and the consuming client application. The server side is pretty straightforward if you’re using a server like Fastify with already enabled JSON Schema support. This post will focus on the concepts more than the actual implementation details though. Here’s a simple diagram illustrating the high-level concept: We can share the schema and type declaration between the client and server. In that case, we can make a request to an endpoint where we know its type and schema, and assuming the server validates the data against the schema before sending it back to the client, our client can be confident about the type of the response data. Marrying JSON Schema and TypeScript There are a couple of different ways to accomplish this: * Generating types from schema definitions using code generation tools * Creating TypeBox definitions that can infer TypeScript types and be compiled to JSON Schema I recommend considering both and figuring out which would better fit your application and workflows. Like anything else, each has its own set of trade-offs. In my experience, I’ve found TypeBox to be the most compelling if you want to go deep with this pattern. Code generation A couple of different packages are available for generating TS types from JSON Schema definitions. * https://github.com/bcherny/json-schema-to-typescript * https://github.com/vega/ts-json-schema-generator They are CLI tools that you can provide a glob path to where your schema files are located and will generate TS declaration files to a specified output path. You can set up an npm hook or a similar type of script that will generate types for your development environment. TypeBox TypeBox is a JSON Schema type builder. With this approach, instead of json files, we define schemas in code using the TypeBox API. The TypeBox definitions infer to TypeScript types directly, which eliminates the code generation step described above. Here’s a simple example from the documentation of a JSON Schema definition declared with TypeBox: ` This can then be inferred as a TypeScript type: ` Aside from schemas and types, TypeBox can do a lot more to help us on our type-safety journey. We will explore it a bit more in upcoming sections. Sharing schemas between client and server applications Sharing our JSON Schema between our server and client app is the main requirement for end-to-end type-safety. There are a couple of different ways to accomplish this, but the simplest would be to set up our codebase as a monorepo that contains both the server and client app. Some popular options for TypeScript monorepos are: PNPM, Turborepo, and NX. If a monorepo is not an option, you can publish your schema and types as a package that can be installed in both projects. However, this setup would require a lot more maintenance work. Ultimately, as long as you can import your schemas and types from the client and server app, you are in good shape. Server-to-client validation and type-safety For the sake of simplicity, let's focus on data flowing from the server to the client for now. Generally speaking, the concepts also apply in reverse, as long as your JSON API server validates your inputs and outputs. We’ll look at the most basic version of having strongly typed data on the client from a request to our server. Type-safe client requests In our server application, if we validate the /users endpoint with a shared schema - on the client side, when we make the request to the endpoint, we know that the response data is validated using the user schema. As long as we are confident of this fact, we can use the generated type from that schema as the return type on our client fetch call. Here’s some pseudocode: ` Our server endpoint would look something like this: ` You could get creative and build out a map that defines all of your endpoints, their metadata, and schemas, and use the map to define your server endpoints and create an API client. Transforming data over the wire Everything looks stellar, but we can still take our efforts a bit further. To this point, we are still limited to serialized JSON data. If we have a created_at field (number or ISO string) tied to our user, and we want it to be a Date object when we get a hold of it on the client side - additional work and consideration are required. There are some different strategies out there for deserializing JSON data. The great thing about having shared schemas between our client and server is that we can encode our type information in the schema without sending additional metadata from our server to the client. Using format to declare type data In my initial JSON Schema blog post, I touched on the format field of the specification. In our schema, if the actual type of our date is a string in ISO8601 format, we can declare our format to be "date-time". We can use this information on the client to transform the field into a proper Date object. ` Transforming serialized JSON Data This can be a little bit tricky; again, there are many ways to accomplish it. To demonstrate the concept, we’ll use TypeBox to define our schemas as discussed above. TypeBox provides a Transform type that you can use to declare, encode, and decode methods for your schema definition. ` It even provides helpers to statically generate the decoded and encoded types for your schema ` If you declare your decode and encode functions for your schemas, you can then use the TypeBox API to handle decoding the serialized values returned from your JSON API. Here’s what the concept looks like in practice fetching a user from our API: ` Nice. You could use a validation library like Zod to achieve a similar result but here we aren’t actually doing any validation on our client side. That happened on the server. We just know the types based on the schema since both ends share them. On the client, we are just transforming our serialized JSON into what we want it to be in our client application. Summary There are a lot of pieces in play to accomplish end-to-end type safety. With the help of JSON Schema and TypeBox though, it feels like light work for a semi-roll-your-own type of solution. Another great thing about it is that it’s flexible and based on pretty core concepts like a JSON API paired with a TypeScript-based client application. The number of benefits that you can reap from defining JSON Schemas for your APIs is really great. If you’re like me and wanna keep it simple by avoiding GraphQL or other similar tools, this is a great approach....

Apr 17, 2024

6 mins

JSONTypeScript

What's new in Tailwind CSS 3?

Introduction

Tailwind CSS v3

Just-In-Time Engine

Scroll Snap API

More Colors

Colored Box Shadows

Print Modifier

Colored Underline Styles

Multi-Column Layout

Modern Aspect Ratio API

RTL and LTR Modifiers

Portrait and Landscape Modifiers

Wrap Up

Mark Shenouda

You might also like

Introducing the New Nuxt 2 - Pinia - Tailwind Kit in Starter.dev

Introducing the New SolidJS and Tailwind CSS Starter Kit

Redux Toolkit 2.0 release

End-to-end type-safety with JSON Schema

You might also like

Introducing the New Nuxt 2 - Pinia - Tailwind Kit in Starter.dev

Introducing the New SolidJS and Tailwind CSS Starter Kit

Redux Toolkit 2.0 release

End-to-end type-safety with JSON Schema