How to add brand colors on TailwindCSS

Adrián UB — Mon, 05 Jul 2021 21:40:19 +0000

ublabs / tailwindcss-brand-colors

Tailwind plugin for adding brands colors.

TailwindCSS Brand Colors

Tailwind plugin for adding brands colors.

Install

npm install @ublabs/tailwindcss-brand-colors

yarn add @ublabs/tailwindcss-brand-colors

Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    //  for all list
    require('@ublabs/tailwindcss-brand-colors'),
    // select the brands
    require('@ublabs/tailwindcss-brand-colors')(['angular', 'tailwindcss']),
    // ...
  ],
};

See the list of all brand colors available here

How to add a new brand color?

Fork/Clone Repository

git clone https://github.com/YOUR-USERNAME/tailwindcss-brand-colors

Install Dependencies
```
yarn install
```
Select Color

Ex: #111827

Set Brand Color

yarn nx workspace-schematic add-brand --name=<brand-name> --hex=#111827

Credits

Inspired by Simple Icons.

License

The MIT License (MIT). Please see License File for more information.

View on GitHub

How to use Simple Icons on Laravel Blade

Adrián UB — Sun, 11 Apr 2021 17:55:25 +0000

Blade Simple Icons

A package to easily make use of Simple Icons in your Laravel Blade views.

Requirements

PHP 7.4 or higher
Laravel 8.0 or higher

Installation

You can install the package via composer:

composer require ublabs/blade-simple-icons

Usage

Icons can be used as self-closing Blade components which will be compiled to SVG icons:

<x-simpleicon-laravel />

You can also pass classes to your icon components:

<x-simpleicon-laravel class="w-6 h-6 text-red-500"/>

And even use inline styles:

<x-simpleicon-laravel style="color: #FF2D20"/>

Raw SVG Icons

If you want to use the raw SVG icons as assets, you can publish them using:

php artisan vendor:publish --tag=blade-simple-icons --force

Then use them in your views like:

<img src="{{ asset('vendor/blade-simple-icons/laravel.svg') }}" width="10" height="10"/>

ublabs / blade-simple-icons

A package to easily make use of Simple Icons in your Laravel Blade views.

Blade Simple Icons

A package to easily make use of Simple Icons in your Laravel Blade views.

For a full list of available icons see the SVG directory.

Requirements

PHP 7.4 or higher
Laravel 8.0 or higher

Installation

You can install the package via composer:

composer require ublabs/blade-simple-icons

Usage

Icons can be used as self-closing Blade components which will be compiled to SVG icons:

<x-simpleicon-laravel />

You can also pass classes to your icon components:

<x-simpleicon-laravel class="w-6 h-6 text-red-500"/>

And even use inline styles:

<x-simpleicon-laravel style="color: #FF2D20"/>

Raw SVG Icons

If you want to use the raw SVG icons as assets, you can publish them using:

php artisan vendor:publish --tag=blade-simple-icons --force

Then use them in your views like:

<img src="{{ asset('vendor/blade-simple-icons/laravel.svg') }}" width=

…

View on GitHub

DEV Community: Ub Labs

How to add brand colors on TailwindCSS

ublabs / tailwindcss-brand-colors

Tailwind plugin for adding brands colors.

TailwindCSS Brand Colors

Install

How to add a new brand color?

Credits

License

How to use Simple Icons on Laravel Blade

Blade Simple Icons

Requirements

Installation

Usage

Raw SVG Icons

ublabs / blade-simple-icons

A package to easily make use of Simple Icons in your Laravel Blade views.

Blade Simple Icons

Requirements

Installation

Usage

Raw SVG Icons