Overview of Tailwind CSS Components with PrimeVue
Summary
TLDRThe 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
🚀 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.
📦 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.
🛠️ 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.
Mindmap
Keywords
💡Tailwind CSS
💡Prime View core
💡Pass-through feature
💡Presets
💡Component library
💡Customization
💡Builder
💡Preset Gallery
💡Unstyled core
💡Light and Dark modes
💡Just-in-Time (JIT) compiler
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
関連動画をさらに表示
Vue.js Nation 2024: PrimeVue | The Next-Gen UI Component Library by Cagatay Civici
The latest in Web UI (Google I/O ‘24)
Flowbite Crash Course in 20 mins | Introduction to UI components using Tailwind CSS
Master the React ecosystem in 2024
What is React | Lecture 09 | React.JS 🔥
This might change how we build UI forever
5.0 / 5 (0 votes)