The Quipper design system is built on Tailwind CSS. To take full advantage of its features, you need to set up Tailwind with your project's build system. For that, you may follow their installation guide.
Once you have it set up, install the Quipper Design System:
npm install --save-dev quipper-ds
Essentially quipper-ds is a packaged Tailwind configuration that you will need to import into your project's own Tailwind config file:
// tailwind.config.js
var {
theme: quipperDsTheme,
plugins: quipperDsPlugins,
} = require("quipper-ds");
module.exports = {
purge: [],
theme: quipperDsTheme,
variants: {},
plugins: quipperDsPlugins,
};
That's it! You should now be able to use Quipper design system tokens in your app via Tailwind's utility classes.
Do this only if you want to test out the design system before fully integrating it into your project. This method is not production-ready and will slow your app's load time.
If you need to get started right away, you can also just link to the design system stylesheet directly in the <head> of your html:
<link href="https://unpkg.com/quipper-ds/index.css" rel="stylesheet" />
Webfont assets are deliberately omitted from this project to allow for flexibility in importing only the fonts that are necessary for your app. You will need to load them yourself for type styles to render correctly.
Once you're set up, you can use Tailwind Config Viewer to find out what classes are available to you to style your app. Just run the following from your project folder and a cheatsheet corresponding to your Tailwind config file will open up in your browser automatically:
npx tailwind-config-viewer -o
FAQs
## Installation
We found that quipper-ds demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF has issued a high-severity advisory warning open source developers of an active Slack-based campaign using impersonation to deliver malware.
Research
/Security News
Malicious packages published to npm, PyPI, Go Modules, crates.io, and Packagist impersonate developer tooling to fetch staged malware, steal credentials and wallets, and enable remote access.
Security News
Microsoft has released an open source toolkit for enforcing runtime security policies on AI agents as adoption accelerates faster than governance controls.