Tailwind CSS Tech Sample
by ‹div›RIOTS
This is a Technology Sample you can rely on to build your own Design System, based on React and Tailwind CSS.
Disclaimer: Technology Samples aren't comprehensive Design Systems but showcases a given technology so you free to build you own solution upon it.
Architecture
This tech sample declares its Design Tokens using the Tailwind CSS Theme Config syntax. Each component in your Design System can exploit those theme specific tokens using the atomic classes exposed by Tailwind CSS.
To build its components, this tech sample uses Headless UI and React/JSX with TypeScript. Components are then styled using Tailwind CSS atomic classes, according to Headless UI examples.
Note: The use of Headless UI is not mandatory and you can use any kind of framework allowing you to customize the rendering process with CSS classes. Headless UI is built by Tailwind Labs whom also provide Tailwind CSS.
Tokens
The Tokens are split in different components:
-
typography: fonts families -
colors: colors, variants, and helpers -
borders: borders and radius -
opacity: transparency values -
shadows: shadows effects -
spacing: relative and absolute spaces -
z-index: z-axe indexes
Tailwind CSS Theme
All tokens are declared in the Tailwind CSS Theme Config syntax by exporting them in dedicated objects, e.g.:
export const typography = {
fontFamily: {
code: ['Consolas', 'SFMono-Regular', 'Monaco', 'monospace'],
},
fontWeight: {
custom: '600',
},
};Then all tokens definitions are merged in the ~/theme/ component to build the global Tailwind CSS theme definition. This theme.extend is used in the tailwind.config.js file directly to setup all the classes and variants.
Components
Components can exploit the Tailwind CSS atomic classes directly:
<button
className={`
${active ? 'bg-purple-500 text-white' : 'text-grey-900'}
flex items-center w-full px-2 py-2
group rounded-md
text-sm
`}
>
Click Me!
</button>
}Stories
Stories are written in Storybook's Component Story Format. Components' stories are located in their stories/ folder.
Documentation
Documentation pages are decorated by a React layout using the @divriots/dockit-react helpers. See the mdx-layout component.
Pages
Each component embed its own documentation in its doc/ folder. You can use any web format for your documentation but we recommend you to write it with the mdx format, allowing you to embed your components live in the documentation.