opentext-blueprint
v2.0.0-beta.13
Published
OpenText Blueprint
Readme
Blueprint - Quickstart
Get started with Blueprint, a CSS framework that enhances Tailwind CSS by providing a set of pre-styled, utility-based classes for faster and more consistent development.
This guide will show you how to install sand use Blueprint in your project.
🚀 Tailwind Quick Start Guides
Need help setting up Tailwind CSS? Follow this guide for your preferred framework:
➡️ Tailwind Quick Start Framework Guides
📦 Installing Blueprint
Blueprint can be integrated into your project via NPM or a CDN (coming soon).
📌 Install using NPM
Make sure Node.js and Tailwind CSS are installed.
Blueprint is designed to work with Tailwind v4.
1️⃣ Install Blueprint via NPM:
npm install opentext-blueprint2️⃣ Import Blueprint styles in your input.css:
@import "opentext-blueprint";This will include all Blueprint classes in your Tailwind project.
🌍 Include using CDN (Coming Soon)
The easiest way to use Blueprint will be via a CDN.
Add this minified CSS inside your <head> tag:
<link
href="https://cdn.jsdelivr.net/npm/opentext-blueprint@latest/dist/blueprint.min.css"
rel="stylesheet"
/>👉 This feature is not yet available but will be coming soon!
🛠 Using Blueprint
Blueprint provides pre-built, utility-based classes built on Tailwind CSS. These classes can be used immediately to speed up development.
🔹 Example: Button Component
<button class="bp-btn bp-btn-primary">Click Me</button>Blueprint’s classes follow the bp- prefix to avoid conflicts with existing Tailwind styles.
🎨 Customizing Tailwind Config
To customize Blueprint’s styles, extend your Tailwind configuration:
Modify tailwind.config.js:
export default {
theme: {
extend: {
colors: {
brand: "#004aad",
},
},
},
plugins: [],
};Override Styles in input.css:
/* Import Tailwind */
@import "tailwindcss";
/* Import Blueprint */
@import "opentext-blueprint";
/* Add custom styles */
@layer components {
.custom-class {
@apply py-2 px-4 md:py-3 md:px-5;
}
}🚀 Upgrading to Tailwind v4
If you're using Tailwind v3, upgrade to Tailwind v4 to take full advantage of Blueprint.
📌 Follow the Tailwind Upgrade Guide.
📖 Learn More
For more details and a full list of components, visit the official Blueprint documentation.