@xtraa/tradesafe-components
v1.2.90
Published
A proprietary internal styled components for TradeSafe team only.
Downloads
593
Readme
@xtraa/tradesafe-components
Requirements
This package installs and uses [email protected] as dependency. While, you should install postcss@8 and autoprefixer@^10 to build your project.
yarn add @xtraa/tradesafe-components
yarn add -D postcss@8 autoprefixer@^10.4.20Set configuration files
postcss.config.mjs
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
export default config;tailwind.config.ts
import { tailwindConfig } from '@xtraa/tradesafe-components';
// extend content path for your project
export default {
...tailwindConfig,
content: [
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
};Use classes and components
For Next.js 14+ app, import the global css file and include dark className for initial mode or not. app/layout.tsx
// required: compiled css used for package components
import '@xtraa/tradesafe-components/css';
// optional: css available to use for each project
import '@xtraa/tradesafe-components/styles';
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html className="dark">
</html>
);
}Use components.
import { Icon } from '@xtraa/tradesafe-components';