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. |