Picasso is Toptal's component library, based on Toptal's design system - BASE. UI designs and documentation can be found for most components at picasso.toptal.net.
yarn add @toptal/picasso @toptal/picasso-provider @toptal/picasso-tailwind
tailwindcss postcss autoprefixer
const path = require('path')
const projectRoot = __dirname
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
path.join(projectRoot, 'node_modules/@toptal/picasso/**/*.js'),
path.join(projectRoot, 'node_modules/@toptal/picasso-*/**/*.js'),
// adjust for your project infrastructure
path.join(projectRoot, '{hosts,libs,namespaces}/**/src/**/*.{ts,tsx}'),
],
presets: [require('@toptal/picasso-tailwind')],
corePlugins: {
preflight: false,
},
}
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
If you are reusing webpack configuration from
@toptal/davinci-engine
you can skip this step as it is setup automatically iftailwind.config.js
is in the repository.Make sure to check all webpack configuration, Application (start/build), Storybook, Cypress
// webpack.config.js
...
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: false,
plugins: {
tailwindcss: {
config: require.resolve(
// update with actual path to tailwind config
'./tailwind.config.js'
),
},
autoprefixer: {},
},
},
},
},
],
},
...
When using Vite or NextJS, adding tailwind config with correct content
should be sufficient in most cases, depending on your configuration.
For more info, you can check out the official Tailwind docs:
Install Tailwind CSS with Vite
Install Tailwind CSS with Next.js
import Picasso from '@toptal/picasso-provider'
import { Button } from '@toptal/picasso'
...
render () {
return (
<Picasso injectFirst>
<Button>Hello world!</Button>
</Picasso>
)
}
A Picasso
component rendered at root level is required for the library theme configuration and theme to work properly.
Documentation and demos are available at picasso.toptal.net.
Our decisons are documented at GitHub