Styles
Base Styles
Primary Colors
Error
Input
Alerts
Buttons
All styles are powered by TailwindCss, having said that you may want to reuse style in easy ways. There are generally 2 options. Create a blade component or apply a CSS style.
AdminTW provides a series or reusable CSS classes made up from TailwindCSS classes.
Base Styles
These are base styles that do not use classes.
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<p>Paragraph</p>
<p><a href="#">Link</a></p>
<hr>
<table>
<thead>
<tr>
<th>Section</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Users</td>
<td>Manage user accounts</td>
<td><a href="#">Edit</a></td>
</tr>
</tbody>
</table>
Primary Colors
AdminTW comes with a primary background and text colour of #5A67D8
To change this edit tailwind.config.js
theme: {
extend: {
colors: {
primary: '#5A67D8',
},
textColors: {
primary: '#5A67D8'
},
},
},
Error
.error use error class to apply red text.
Paragraph
<p class="error">Paragraph</p>
.input
<input class="input">
Alerts
<div class="alert alert-primary">Primary</div>
<div class="alert alert-gray">Gray</div>
<div class="alert alert-red">Red</div>
<div class="alert alert-yellow">Yellow</div>
<div class="alert alert-green">Green</div>
<div class="alert alert-blue">Blue</div>
<div class="alert alert-indigo">Indigo</div>
<div class="alert alert-purple">Purple</div>
<div class="alert alert-pink">Pink</div> Buttons
<a href="#">Styled link</a>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-gray">Gray</button>
<button class="btn btn-red">Red</button>
<button class="btn btn-yellow">Yellow</button>
<button class="btn btn-green">Green</button>
<button class="btn btn-blue">Blue</button>
<button class="btn btn-indigo">Indigo</button>
<button class="btn btn-purple">Purple</button>
<button class="btn btn-pink">Pink</button> To change the classes edit the files at:
resources/sass/app.scss
resources/sass/form.scss
resources/sass/typography.scss
resources/sass/utility.scss
resources/sass/components/alert.scss
resources/sass/components/button.scss
resources/sass/components/card.scss
resources/sass/components/link.scss
Make sure you run npm run dev to rebuild the CSS file after making any changes.