Default Progress
A basic Tailwind CSS Progress example.
Colors
Use the custom Tailwind CSS Color
classes to customize the progress component.
<div class="progress progress-primary">
<div class="progress-bar" style="width: 20%">
</div>
</div>
<div class="progress progress-success">
<div class="progress-bar" style="width: 30%">
</div>
</div>
<div class="progress progress-info">
<div class="progress-bar" style="width: 40%">
</div>
</div>
<div class="progress progress-danger">
<div class="progress-bar" style="width: 50%">
</div>
</div>
<div class="progress progress-warning">
<div class="progress-bar" style="width: 60%">
</div>
</div>
<div class="progress progress-dark">
<div class="progress-bar" style="width: 70%">
</div>
</div>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Progress component.
Upon building the assets using Webpack Build Tools,
the below file is compiled and added into the
dist/assets/css/styles.css bundle,
making it available globally across all pages.
| File | Description |
|---|---|
src/core/plugins/components/progress.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Progress component. |
