System Design CreativeCode.com.co
npm install @creativecodeco/ui
or
yarn add @creativecodeco/uinpm install --save-dev tailwindcss postcss postcss-import autoprefixer usehooks-ts cssnano
or
yarn add -D tailwindcss postcss postcss-import autoprefixer usehooks-ts cssnanoCreate file tailwind.config.js and add
/** @type {import('tailwindcss').Config} */
import { creativeCodeTheme } from '@creativecodeco/ui';
const themeConfig = {
...creativeCodeTheme,
content: [
...creativeCodeTheme.content,
'./src/**/*.{js,jsx,ts,tsx}',
'./app/**/*.{js,jsx,ts,tsx}',
],
};
export default themeConfig;/** @type {import('tailwindcss').Config} */
import { creativeCodeTheme } from '@creativecodeco/ui';
const themeConfig = {
...creativeCodeTheme,
content: [
...creativeCodeTheme.content,
'./src/**/*.{js,jsx,ts,tsx}',
'./app/**/*.{js,jsx,ts,tsx}',
],
daisyui: {
...creativeCodeTheme.daisyui,
themes: [
{
customTheme: {
...require('daisyui/src/theming/themes')['light'],
primary: '#08448c',
secondary: '#427AA1',
neutral: '#EBF2FA',
accent: '#679436',
other: '#A5BE00',
},
},
],
},
};
export default themeConfig;Create file postcss.config.js and add
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
},
};Add on layout layout.tsx
import { CreativeCodeUIProvider } from '@creativecodeco/ui';
import '@creativecodeco/ui/lib/theme/css/main.css';
export default function RootLayout({ children }) {
return (
<html>
<body>
<CreativeCodeUIProvider>
{children}
</CreativeCodeUIProvider>
</body>
</html>
);
}MIT © CreativeCode.com.co