►
From YouTube: Integrating Tailwind CSS framework into a SPFx React project for advance User Experience
Description
In this 15-minute Developer - focused demo, Fabio Franzini familiarizes listeners with the Tailwind CSS Framework, steps through installation, configuration and use/integration into an SPFx React project. CSS custom properties are used to manage Tailwind CSS Classes - the Theme Variant into sections. Tailwind delivers additional options for changing elements - weights, colors, fonts, backgrounds than OOB SharePoint themes/CSS. A powerful capability delivered by Tailwind CSS is responsive layout rendering. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 19, 2020.
Demo Presenter: Fabio Franzini | @franzinifabio
Supporting materials:
• CSS Framework site: Rapidly build modern websites without ever leaving your HTML. | https://tailwindcss.com/
• Repo: react-tailwindcss | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-tailwindcss
• Sandbox - Tailwind Playground | https://play.tailwindcss.com/
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
In
this
demo,
I
want
to
show
you
how
to
use
the
tilewind
css
framework
inside
a
sharepoint
framework
project.
So
just
a
few
words
about
me,
I'm
a
max
of
time
vp
in
two
categories,
office,
development
and
business
application,
and
I
work
as
an
independent
senior
consultant
and
mct
trainer
on
the
microsoft
365
and
power
platform.
So
you
can
find
here
some
information
if
you
want
to
contact
me.
So,
let's
start
first
of
all,
what
is
tylewind
css?
A
Basically,
the
thalwin
css
is
a
utility
first
css
framework
that
contain
already
pre-builded
classes
that
you
can
use
to
compose
your
ui
directly
by
using
the
markup
without
write
the
css,
because
we
already
have
the
css
classes
for
that
cover.
Almost
all
the
aspects
of
the
ui,
for
example,
text
margin,
padding
background
and
a
lot
of
stuff
regarding
the
ui.
A
What's
the
core
concept?
It's
a
utility.
First,
we
already
have
a
lot
of
primitives
utility
builded,
it's
a
responsive
because
it
contains
a
concept
of
variant,
a
variant.
It's
a
a
piece
of
selector
that
you
can
combine
with
another
primitive
to
to
create
a
complex
selector
and
apply
some
primitive.
A
Just
in
some
breakpoints
or
in
case
of
the
pseudo
class,
we
have
some
variants
that
you
can
use
to
to
apply
some
primitive
on
hover,
on
focus
on
and
and
more.
The
best
thing
is
that
the
tailwind
css
is
a
completely
configurable.
You
can
use
a
simple
js
module
and
you
can.
You
can
use
this
file
to
configure
all
the
aspect
of
the
framework,
it's
very
powerful.
A
A
A
In
this
complex
example,
you
are
able
to
show
you
you're
able
to
see
different
ui
that
contain
the
same
structure
of
html,
but
that
user
are
different
class
names
inside
the
markup,
because
the
tile
wind,
it's
already
pre-builted.
So
we
can
build
the
the
css
file
by
using
the
configuration
file
to
change
the
colors
and
all
the
aspects
of
the
framework.
A
This
example
it's
an
example
that
implement
the
the
document,
the
document
card
builder
for
fluent
ui,
and
it's
using
only
the
the
tallowing
css
classes.
For
example.
We
can
change
some
aspect,
some
classes,
and
then
we
can
move
and
change
the
the
margin,
for
example,
and
we
can
change
a
different
classes
like
we
can
remove
the
border
or
put
the
border
or
remove
backgrounds
or
different
classes.
A
A
And
then
we
need
to
add
a
simple,
simple,
tailwind,
css
or
the
name
that
you
want
inside
the
source.
Folder
and
add
these
three
directives.
It's
a
custom
directive
that
the
tailwind
have
and
contains
the
the
the
basic
classes
for
bayes
for
component
and
for
utilities,
and
then,
after
that,
you
need
to
create
a
configuration
file.
In
my
case
the
name
is
thetalwind.config.js
and
inside
this
file
you
are
able
to
overwrite
all
the
configuration
for
temp
change,
the
colors
from
the
sharepoint
theme.
A
Okay.
So
what
about
the
section
background
in
sharepoint
page
so
tile,
wheel,
css
has
shipped
with
the
the
home
colors,
but
we
want
to
use
the
colors
that
we
have
inside
the
sharepoint.
For
example,
in
this
case,
I
extended
the
configuration
file
by
extending
the
colors
and
I
create
the
different
colors.
Basically,
the
name
is
the
same
name
that
we
have
inside
the
the
theme
object
inside
the
sharepoint
and
I
set
evaluate
as
a
css
variable.
A
It's
very.
This
is
very
powerful
because
at
runtime
we
can
change
the
variable
by
using
theme,
change
it
haven't
inside
our
our
web
part,
and
then
we
can
set.
We
are
able
to
set
for
the
current
dom
element
of
the
web
part,
for
example,
the
the
property,
and
in
this
case
we
can
set
all
the
property
all
the
css
variables
to
the
current
value
that
we
want
to
use.
A
Of
course,
you
need
to
add
the
support
for
the
team
variants
because
out
of
the
box,
it's
not
enabled
for
for
the
web
parts.
Another
thing
is
the
possibility
to
have
the
responsiveness
by
using
the
page
columns
inside
a
sharepoint
page.
In
this
case,
we
need
to
create
a
custom
plugin
for
thai
wind
css
and
then
add
this
plugin
inside
the
the
configuration
file.
A
It's
it's
this
implementation,
it's
not
a
very
good
implementation,
because
we
use
the
the
sharepoint
css
classes
to
understand
what
is
the
the
section
inside
the
page
when
we
part
it
rendered,
but
I
want
to
change
this
this
way
to
to
adopt
another
another
method
to
understand
in
which
section
the
web
part
it's
present.
But
now
it's
work.
A
Basically,
the
plugin
it's
an
on
a
variant,
so
we
need
to
create
a
variant.
I
named
it,
this
variant,
sp
minuscule,
means
one
or
the
different
variation,
and
then
we
need
to
modify
the
selector.
We
take
the
the
class
name
and
then
return
just
a
big,
a
big
selector
that
contains
the
first
part
contains
the
selector
of
the
call
of
the
section
inside
the
sharepoint
page
and
then
our
our
classes.
A
And
if
I
change
the
the
layout
of
the
page,
you
are
able
to
see
that
the
component
is
automatically
rearrange
it
by
using
a
different
css
classes,
it's
very
powerful.
So
let
me
show
you
the
implementation.
So
basically,
we
need
to
enable
the
support
for
the
team
variants
and
then
inside
the
webpart
class.
A
And
then
the
latest
thing
you
remember
it's
the
gut
file
that
contains
the
post,
build
task
that
you
have
to
use
to
take
the
title
in
the
css
inside
the
source
and
then
compile
inside
the
lib,
the
lib
folder
inside
the
lib
folder.
We
have
only
the
css
that
contain
only
the
classes
that
we
use
inside
our
component
and
inside
our
component,
for
example,
the
document
card.
This
is
a
simple
react
component.
We
can
use
the
class
name
and
put
all
the
tally
in
the
classes
to
to
make
the
style
inside
the
horizontal
card.
A
You
are
able
to
see
that
we
can
use
our
custom
variation,
a
speak
called
one
and
then
apply
a
different
border,
or
here
a
different
selector
class
to
to
change
the
layout
of
the
component.
Based
on
these
on
this
variant,
okay,
I
just
wan-
I
have
just
one
slide
again
next
step.
Of
course,
I
want
to
add
the
support
for
the
tallywind
version
2,
because
there
are
a
lot
of
improvement
in
these
in
these
libraries.
A
I
want
to
add
the
support
for
the
team's
theme,
and
I
want
to
improve
the
support
for
the
sharepoint
team
and
another
thing
I
want
to
to
implement:
it's
rebuild
from
scratch:
the
responsive
plugin
to
remove
the
sharepoint
section,
css
class
and
use
a
different
way
to
to
to
check
the
parent,
the
parent
container.
Okay,
I'm
finished.
Thank
you.