We're excited to announce that @prism2/tailwind-theme is now available as a pre-alpha. It provides an out-of-the-box way to incrementally adopt Prism design standards without writing any CSS or including anything you don't need.
We are using this same theme package to build the entire component library for Prism2. As we refine various aspects of Prism2, this package will adhere to the most up-to-date brand guidelines. Please keep in mind that this pre-release package is under active development and will change significantly. We are unable to offer support during the alpha period. Do not use for production. Use at your own risk.
We hope that by using this theme (once ready) teams can implement UIs with the look-and-feel of Prism2 across their apps without worrying about specific hex values or pixel counts; nor need to use specific library component (or eventually fork it to suit their needs).
One-step Setup
Prerequisite: You must configure your project to use Artifactory as the registry
pnpm add tailwindcss postcss autoprefixer \
@prism2/tailwind-theme && npx tailwindcss init && echo \
"module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }" \
>> postcss.config.js
This should work for most React frameworks. See the Tailwind Framework Guides for more information on configuring certain setups.
Tell Tailwind to use the theme
//tailwind.config.js
module.exports = {
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,jsx,tsx}"],
theme: {
extend: require('@prism2/tailwind-theme'),
},
plugins: [],
}
}