```bash npm install ```
npm install dfh-ui-library``bash`
npm install
`bash
1. npm install -D tailwindcss postcss autoprefixer
2. npx tailwindcss init -p
3. update tailwind.config.js "content" with following code snipet
content: [
"./index.html",
"./src/*/.{js,ts,jsx,tsx}",
]
`
include following css to index.css
`bash
@import '../node_modules/dfh-ui-library/dist/cjs/index.css';
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'tailwindcss/variants';
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px;
border-right: 1px solid #dddddd; / Solid right border for all cells /
}
th {
background-color: #fcfcfc; / Optional: Add background color for header cells /
font-weight: 500;
border-top: 1px solid #dddddd;
}
/ Dashed bottom border for all rows /
tr {
border-bottom: 1px dashed #dddddd;
}
/ Remove border from the last column /
th:last-child,
td:last-child {
border-right: none;
}
tr:nth-child(even) {
background-color: #f6f6f6;
} /# sourceMappingURL=main.css.map /
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image {
display: block;
width: 100%;
height: auto;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.image.loaded {
opacity: 1;
}
.loader-wrapper {
position: relative;
}
.progress-bar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
`
`Javascript`
npm run storybook
run above command for view the components layouts
`Javascript``
npm run rollup
run above command for build the UI library
For information about Chromatic UI Review workflows, responsive design testing, and designer integration, see CHROMATIC.md.