Overview of Tailwind CSS Components with PrimeVue

Summary

The video introduces Tailin, a new CSS-based UI component library for Prime View core. It offers customizable components with a pass-through feature, allowing for extensive styling with Tailwind classes. The library, developed in three weeks, provides presets for easy skinning of components and encourages community-driven customization. It also features a Builder tool for creating custom presets and a preset Gallery for sharing unique UI implementations, promising a dynamic and flexible approach to UI development.

Takeaways

• 🎉 The release of a new Tailwind CSS-based UI component library for PrimeNG Core has been announced.
• 🔍 The library is designed to be unstyled at its core, allowing for flexibility in styling with CSS libraries like Tailwind.
• 🌐 The new component library is available at tail.primeyou.org, emphasizing the same components with different 'skins' injected through properties.
• 🔄 The 'pass-through' feature is highlighted as a key aspect of the library, enabling customization of internal elements with Tailwind classes.
• 📅 A demonstration of components like the calendar and checkbox showcases the ability to customize and style internal DOM elements.
• 🛠️ The development process of the Tailwind CSS library took three weeks, emphasizing ease and customization.
• 📦 Each 'preset' is described as a JavaScript object for pass-through configuration, allowing for easy switching of design systems.
• 🎨 There are plans for additional presets, including a material design-based preset, encouraging community involvement in creating UI libraries with PrimeNG.
• 🌑 The library supports multiple light and dark modes, with dynamic switching powered by PrimeNG's unstyled core.
• 🛑 The importance of starting with PrimeNG in unstyled mode is stressed, along with the need for a Tailwind configuration scanner.
• 📈 The script mentions a weekly release cycle for new components and features, with a focus on community-driven contributions and customizations.

Q & A

What is the main announcement in the video script?

The main announcement is the release of a new Tailwind CSS-based UI component library for PrimeView Core, which is available at tail.primeyou.org.

Why did the creators decide to build a Tailwind-based UI components library?

They decided to build the library because PrimeView has an unstyled core and they wanted to provide a way to inject styles through the pass-through feature, allowing for greater customization and flexibility.

What is the pass-through feature and how does it work?

The pass-through feature exposes the component's internal elements through an API, allowing users to add properties, classes, styles, and attributes to these elements, thus customizing the components with Tailwind classes or other styles.

How long did it take to build the Tailwind-based CSS library?

It took three weeks to build the initial version of the Tailwind-based CSS library.

What is a 'preset' in the context of this UI library?

A 'preset' in this context is a JavaScript object that serves as a pass-through configuration, essentially acting as a skin for the components that can be switched to change the overall design system.

What is the significance of the multiple presets feature?

The multiple presets feature allows users to switch between different design systems or skins for the components, providing a quick way to change the look and feel of the UI without altering the underlying component logic.

What does the term 'SDK' or 'API' imply in the context of the PrimeView Core?

It implies that PrimeView Core can be used as a foundation to develop custom UI libraries, leveraging its functionality and the pass-through feature to create unique user interfaces.

What is the process for getting started with the new Tailwind-based UI library?

To get started, one needs to have PrimeView set up in unstyled mode and configure Tailwind to scan PrimeView components, ensuring that the Just-In-Time compiler does not remove any classes.

How often can users expect new releases of the library?

Users can expect new releases every Wednesday, with new components and features being added regularly.

What is the 'Builder' tool mentioned in the script?

The 'Builder' is a small tool designed to help users create their own presets by selecting components and naming the preset, making it easier to customize and build upon the existing library.

What is the 'Preset Gallery' and how does it contribute to the community?

The 'Preset Gallery' is a community-driven space where users can share and showcase their custom presets and UI implementations, acting as a resource for inspiration and collaboration.

Outlines

00:00

🚀 Launch of Tailwind CSS-based UI Library for Prime View Core

The script introduces a new Tailwind CSS-based UI component library for Prime View Core. The presenter aims to provide an overview of the project's progress and future plans. The library is designed to work with Prime View's unstyled core, allowing for customizable skins via a pass-through feature. This feature exposes internal elements of components for styling with Tailwind classes. The library is available at tail.primeyou.org, and the components remain consistent, only the skin is injected differently. The project was completed in three weeks, showcasing the ease of customization. Each skin is referred to as a preset, a JavaScript object that configures the pass-through properties. The website features multiple presets that can be switched to change the design system. There are also plans for presets based on other design systems like Material Design. The script concludes by emphasizing the community's role in building their own UI libraries using Prime View as an SDK or API.

05:01

📦 Customization and Release Process of Tailwind-based Components

This paragraph delves into the customization options available with the new UI components. The script explains the process of accessing and modifying the presets, which are essentially JavaScript objects that dictate the pass-through configuration. It discusses the decision not to publish presets as an npm package to allow for greater customization flexibility. Instead, users are encouraged to copy and paste the necessary files from GitHub into their projects. The script also highlights the inclusion of a color palette from Tailwind and a light/dark mode switch, which is powered by Prime View's unstyled core. The variety of dark modes is demonstrated, showing how CSS variables can be used to dynamically change themes. Additionally, a Builder tool is introduced to assist users in creating their own presets, and a preset gallery is mentioned as a community-driven feature for sharing custom component designs.

10:02

🛠️ Community and Customization Tools for Tailwind UI Components

The final paragraph focuses on the community aspect and the tools provided for customization. It describes the preset gallery as a platform similar to CodePen, where users can share their custom component designs, such as material input switches and snack bars. The script mentions the creation of six examples by the presenter and encourages team members and the community to contribute. The gallery serves as a space for users to explore and implement unique UI designs that go beyond the standard offerings of the Prime View component library. The paragraph also discusses the flexibility of the pass-through feature, which allows for the extension of components with additional attributes not originally present in the Prime View core. The script ends by summarizing the release schedule, with new components planned for each Wednesday, and hints at the upcoming release of a data table skin. The emphasis is on the empowerment of users to fully customize their UI components and the anticipation of an exciting 2024 for Prime View users.

Keywords

💡Tailwind CSS

Tailwind CSS is a highly customizable, utility-first CSS framework that provides developers with a set of pre-defined classes for rapid UI development. In the context of the video, Tailwind CSS is used as the styling engine for the new UI component library for Prime View core, allowing for the injection of styles through properties and enabling a wide range of customization options.

💡Prime View core

Prime View core is an unstyled UI framework that provides the foundational components for building user interfaces without being tied to a specific CSS library. The video discusses the creation of a new Tailwind CSS-based UI component library for Prime View core, emphasizing the flexibility and customization capabilities it offers to developers.

💡Pass-through feature

The pass-through feature is a mechanism that allows developers to customize the internal elements of UI components by exposing them through an API. In the video, this feature is highlighted as a key aspect of the new Tailwind CSS-based library, enabling the addition of properties, classes, and styles to the components, thus personalizing their appearance.

💡Presets

Presets in the video refer to pre-configured JavaScript objects that define the 'skin' or appearance of the UI components. Each preset acts as a design system, allowing for easy switching between different styles or themes. The script mentions that presets can be customized and are a fundamental part of the new UI component library's flexibility.

💡Component library

A component library in the context of the video is a collection of pre-built UI components that can be used to create user interfaces quickly and efficiently. The new Tailwind CSS-based UI component library for Prime View core is discussed as a way to provide developers with a wide range of customizable components.

💡Customization

Customization is a central theme in the video, referring to the ability to modify the appearance and behavior of UI components. The Tailwind CSS-based library allows for extensive customization through the pass-through feature and the use of presets, empowering developers to tailor the components to their specific needs.

💡Builder

The Builder mentioned in the script is a tool designed to assist developers in creating their own presets for the UI components. It allows for the selection of specific components and the naming of custom presets, streamlining the process of building a personalized UI component library.

💡Preset Gallery

The Preset Gallery is a community-driven platform showcased in the video, which serves as a collection of different UI design implementations created by users. It is a place where developers can share and explore various presets, contributing to a rich ecosystem of UI designs built on Prime View core.

💡Unstyled core

The term 'unstyled core' refers to the foundational components of Prime View that do not have any inherent styling, allowing for the integration of any CSS framework, such as Tailwind CSS, for styling purposes. The video emphasizes the benefits of starting with an unstyled core for maximum flexibility in UI development.

💡Light and Dark modes

Light and Dark modes are UI themes that adjust the color scheme of an application to be either light or dark, typically to suit user preferences or to improve readability in different lighting conditions. The video discusses the implementation of multiple light and dark modes in the new Tailwind CSS-based UI component library, demonstrating the adaptability of the components.

💡Just-in-Time (JIT) compiler

Just-in-Time compilation is a method where code is compiled at runtime, optimizing performance. In the context of the video, Tailwind CSS uses a JIT compiler to add classes on demand, which is an important aspect of how the styling is applied dynamically to the Prime View core components.

Highlights

Introduction of a new Tailwind CSS-based UI component library for Prime View core.

The library is available at tail.primeyou.org and offers the same components with a different skin.

The components are skinnable through the pass-through properties feature, allowing customization of internal elements.

Demonstration of how to customize checkbox and calendar components using the pass-through feature.

The development of the Tailwind-based CSS library was completed in three weeks, emphasizing ease and customizability.

Each skin is referred to as a preset, which is a JavaScript object for pass-through configuration.

Multiple presets allow for switching between different design systems easily.

Plans for future presets include material design-based options and community-driven UI implementations.

Prime View is positioned as an SDK or API for developing custom UI libraries.

The color palette from Tailwind is integrated, and a light/dark mode switch is powered by the unstyled core of Prime View.

A tutorial will guide users on how to get started with Prime View in unstyled mode and configure Tailwind.

More than 30 components are currently available, with new releases planned for every Wednesday.

The Builder tool is introduced to assist in creating custom presets for different components.

The Preset Gallery showcases community-driven examples and allows users to submit their own creations.

Customization extends beyond what Prime View core provides, enabling users to add attributes not originally present in components.

Upcoming releases will include a data table component, with the next version expected by mid-January.

The approach of providing full code access allows for extensive customization and adaptability.

Future tutorials will cover building custom presets, component customization, using the Builder, and creating gallery items.

Prime View and other libraries continue to evolve, promising an exciting 2024 for Prime users.

Transcripts

hello to all today I have some exciting

news the new tailin CSS based UI

component library for Prime View core is

out and in this video I'd like to go

through over as an as to give you an

overview of what we have done so far and

what's coming up and in the upcoming

videos we will go um in more detail and

work with the components try to

customize them and so on so what is this

actually it's a Prime View has an

unstyled core so the core doesn't depend

on any CSS Library so we couldn't fit

all these features into a single

showcase single website Prime view.org

so we have decided to take a different

approach and try to build this Talent

based UI components and it's available

at tail. Prime you.org the main thing is

the components are exactly the same so

but the skin is injected through the

pass through properties feature the pass

through feature is quite uh exciting

actually so it allows you for example

let's check out the calendar or maybe

checkbox so if you go to the pass

through tab the component internal

internal um elements are exposed through

the pass through API it allows you to

for example the checkbox has the alter

Rim the icon and so on so every every

Dom element is accessible with the pass

through feature so that you can add

elements or so so you so sorry you can

add properties and and classes and style

and area attributes anything you like to

these elements so since class and style

are um very special uh you will be able

to inject your Tailwind classes which

means you can style them with tail as I

mentioned we had some demos but they

were like some hidden somewhere so we

built this tail based CSS library in

three weeks actually so this is quite uh

the whole thing is quite easy and

customizable for us to do because we

don't write components we write skins so

each skin is called a preset and the

preset is basically a JavaScript object

it's a pass through

configuration I will show you one and

let's see what we have here on the main

website the multiple presets features

quite nice so that you can switch

presets a preset is more like maybe if

you skin all of the switch it will give

you a design system and but a preset

maybe for a single compound as well

because in the P preset Gallery I

created like six examples for you it's

not like the whole lip just one so a

preset is more like a skin for um uh the

pass through object for for a component

so the idea is that you can also

switch uh presets for example this one

is the wind I can switch to Lara and

more presets are coming up there are

some plans to do a material uh design

based preset and if you like some of the

nice uis that you'll see we can

Implement them as pres presets uh which

means Prime View is now an like an SDK

or an API to develop your own UI Library

actually it's funny but we can also

develop the other libraries that other

well-known libraries in ecosystem with

Prime View because they usually depend

on a CSS Library like Tailwind pstp

material so so we can just provide them

a preset for them in since Prime has a

lot of functionality I mean I really

really expect the community to pick this

up and build their own UI libraries

based on Prime View so there's a color

palette of course from tailwind and

Light Dark switch is kind of different

because there are various dark modes and

various light modes and it's powered by

Prime View unstyled

core all right let's begin so to get

started there will be a separate

tutorial but it's the main thing here is

that you need Prime View to begin with

of course it's because the um it's based

on Prime View unstyled course so you

need to set uh Prime View in unstyled

mode and once you have regular tailin

configuration there's no special

configuration required except that you

need to add the content scanner of

tailin uh to make sure that tailin also

scans Prime View stuff in the no modules

otherwise it will remove some of the

classes because you know tailin uses

Justus in time compiler it's adds the

classes on demand and so on so there's

every preset has a couple of CSS

variables in the in this case just

primary Shades and service and so on so

I'll not go through the details of the

documentation because we have a separate

videos coming up for that but let's

check out the current lineup currently

we have more than 30 components but um

every Wednesday we will do a new release

and there will be new components for

example let's check out the input switch

it looks like regular input switch but

it's basically tailent input switch and

if you check out for example droptown so

we have the same Lara it's quite nice

because we can also Implement these

animations with

tailand so here we have um

the drop down for example if we check

out here we can reach to the wind preset

and now the Tailwind classes a different

set of classes are applied and we can

see that here so here's the Lara preset

for drop down for example it has

different H States and so on and here is

the wind version it has some it has a

condense mode uses a different highlight

and so on um you have full code you have

access to the full code here because

this is how it's used you have to copy

and paste these presets um and then add

them to your project which means so

that's the biggest thing uh that's the

biggest decision that we made um if we

put these all these presets to an mpm

package we could have done that of

course mpm publish is free I mean we

could have done that but then how are

you going to customize background colors

hovers stat everything how are you going

to do the styling if you just pick them

up from nod modules it will be

JavaScript import file and then it will

be like CSS trying to CSS overwrite with

some classes and you you're trying you

will add importance and so on it's still

possible but um the the approach we are

suggesting is that copy paste these

releases are available on GitHub and

then you just get these uh file

extracted to your project and start

using since the folder is in the same um

application folder that you're using you

can just switch change everything for

because we have decided this based on

user feedback in the past we were just

uh we published the tailet preset to mpm

and then many users are having problems

with trying to customize for even a

simple like how I can custom how can I

customize the background of an input to

different color now you have access to

everything here because it's in your

Source actually it's the it's actually a

part of your application Source it's not

something that you import from as a

module and another cool thing here is

that let's check out for

example um

checkbox now it's you see that it's

quite small

the um let's check out one for example

tab view could be nice so as I mentioned

there are multiple dark modes and

multiple light modes so here um the

light mode is not quite visible because

hold the surface layers white but for

example there's a small tone change as

you can see um and if we we can check

out the primary colors as well quite

easily it's based on CSS variables so

it's it's dynamically possible let's go

to the dark mode and there are a couple

of dark modes as I mentioned for example

each dark mode can have their own uh set

of colors for the dark mode maybe a

fully black one or maybe some with the

bluish colors and so on which I like

this one so I will keep this so um how

we how this is done actually this is

thanks to uh if you check out for

example maybe there will be a preset

here here we

have

um dark border primary this is a tail

and extension plus there's another ex

extension called surface so we add these

extensions to our

Tailwind extended colors and with

JavaScript we once we switch these

colors Everything Changes these colors

are semantic and the tail and extended

colors are used by the preset so the

checkbox doesn't use background white or

something it uses surface zero surface

uh 500 and primary so that once you can

switch them as a CSS variable uh you're

good to go um the next thing is the

Builder uh Builder is a small tool to

help you uh build your own presets so

that you can choose for example I want

drop- down calendar and you type the

preset name my preset because releases

are on GitHub and it the zip file

contains everything now you can just

download and put it to your project it's

simple in case you don't want to use

everything and the preset Gallery is

something that I was really excited

about um that I I worked on it and

implemented myself so the gallery is

like uh instead of so it's idea is to

make a Community Driven Gallery like U

it's like a Cod pen as well for and it's

not for the whole library but if you

have an idea like I had a couple like

how to implement the material input

switch how to use a material snack bar

material input field with float labels a

glass morphic for example let's see if

this will work a glass morphic version

and maybe shatan like dialog if you like

that style and how to implement that

that goes this goes beyond what you V

Pro component Library provides you you

are freestyle you're just Unleashed to

do whatever you are you like to do uh

and detail is your key and your tool and

powered by Prime VI core so more items

are planned for gallery and you can also

uh create your own um Gallery item and

submit to us and we will just provide it

and we display the GitHub username the

stars and to kick startings I at the

weekend I just created six examples some

of our team members will also provide

one and so this is gives you an idea

because for example if you check out the

metal input switch uh it goes beyond

what the Prime View core can provide you

can even customize you can even add

attributes that does not happen uh that

doesn't exist on the components for

example uh the material input switch the

material toggle doesn't have an accent

um accent mode in Prime View core but

with with with all this pass through

stuff I was able to extend the

components and edit an accent mode as

well so here you can see I have a glass

morphic UI uh implemented with Prime

View and unst uh it's quite nice and

this is a material toggle that I've done

so this is the primary and this is ex as

you can see the component is same so you

use input switch your application code

doesn't change that's the magic so you

just inject your Styles uh through an

API and the cool thing part the cool

part is that there was an accents here

that was not available uh this type

equal the accent doesn't exist so I just

added

it okay um so the TA to summarize the

tailin website is out every Wednesday we

will provide a new release and stay

tuned next version will bring the mighty

data table uh the good part as I

mentioned we we are not writing a data

table for this we are just providing a

skin so it will be quite this the whole

thing was done in 3 weeks so by the end

of maybe after the holidays in by mid

January before the conference session

begins uh because we going to present

these in the conferences uh we Pro we

are trying to provide everything and

with two presets at least with wind and

Lara to give you an idea but as I

mentioned this is a tool to build your

own you can use it like this but the

idea is that you have the full code you

change whatever you like you change the

pieces the presets are here to give you

a a head start okay uh in the next

stream of tutorials we will go through

how we will go to we will discuss some

codes how to uh build your own presets

how to customize the components how to

use the Builder and how to create a

gallery item and so on there's so much

things to discuss and in the meantime

Prime View and other libraries are going

strong with new modes so this was just

the Milestone and more stuff are coming

ahead and 2024 will be quite exciting

for Prime users always B on Prime and

stay tuned thank you