Help with setting up and using

[daugaard47]

Apologies in advance for the newbie question...
I've been trying to get it to install with Laravel, but doesn't seem to be working.
Could you supply the install instructions for use with Laravel? I'm using webpack to compile.

Also when using in Html how exactly are we supposed to name the div?
Example:
<div class="bg-gradient-t-red> or Like this <div class="bg-gradient-[tr br]-[red red-dark]>

Here is what I have in my tailwind.js file. I would like to use the default colors that come with tailwind.

  theme: {
    colors: {
  'transparent': 'transparent',
  'black': '#22292f',
  'grey-darkest': '#3d4852',
  'grey-darker': '#606f7b',
  'grey-dark': '#8795a1',
  'grey': '#b8c2cc',
  'grey-light': '#dae1e7',
  'grey-lighter': '#f1f5f8',
  'grey-lightest': '#f8fafc',
  'white': '#ffffff',

  'red-darkest': '#3b0d0c',
  'red-darker': '#621b18',
  'red-dark': '#cc1f1a',
  'red': '#e3342f',
  'red-light': '#ef5753',
  'red-lighter': '#f9acaa',
  'red-lightest': '#fcebea',

  'orange-darkest': '#462a16',
 ....etc....
    },
    gradients: theme => ({
      directions: { // defaults to these values
        't': 'to top',
        'tr': 'to top right',
        'r': 'to right',
        'br': 'to bottom right',
        'b': 'to bottom',
        'bl': 'to bottom left',
        'l': 'to left',
        'tl': 'to top left',
      },
      colors: theme('colors'),
    }),
  },
  plugins: [
    require('tailwindcss-gradients')(),
  ],

Then webpack/mix

let mix = require('laravel-mix');
require('laravel-mix-tailwind');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .tailwind()
    .options({
        postCss: [
        require('postcss-css-variables')()
        ]
    });

Really excited to use this package as it sounds great.

[benface]

Hey @daugaard47, thanks for using this plugin! There's nothing special about using it in a Laravel project. As long as your Tailwind CSS build is properly set up, all you have to do is import/require it in the plugins key of your Tailwind config and add the gradients key to your theme... basically, exactly what you're doing.

Also when using in Html how exactly are we supposed to name the div?

Assuming you have a t direction and a red color (which you do in the tailwind.js file you pasted above), you would have a class named bg-gradient-t-red, which would be a gradient going from the bottom (transparent) to the top (red). If you want a gradient from a color to another, you would add it as an array in your theme.gradients.colors key, so replace this line:

colors: theme('colors'),

by:

colors: {
  ...theme('colors'),
  'red-to-red-dark': [theme('colors.red'), theme('colors.red-dark')],
},

If you're not sure which classes are available, I suggest searching for "gradient" in your compiled CSS.