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

H2

H3

H4

Paragraph

Link


Section Description Action
Users Manage user accounts Edit

                
                    <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

Primary
Gray
Red
Yellow
Green
Blue
Indigo
Purple
Pink

                
                <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

Styled link

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

© 2022 AdminTW. All rights reserved.

Built by David Carr