[typhoon] help/documentation needed - tailwind.config.js - npm run build

[digitalbirth]

I have added this to the tailwind.config.js file

I have tried to extend the colors

  theme: {
    extend: {
      color: {
        brandtest: "#243c5a",
      },

and also tried within the standard theme colors

colors: {
      // Removed Teal, Orange, Pink
      'brand': '#66ffcf',
      black: colors.black,

But I am not getting anything coming through in the css files, I have run npm run build and npm run build prod

I can only run npm run build by disabling mode: 'jit', as it gives me a warning and doesn't complete, so I am not sure if that is related.

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

I have tested by adding css to the /css/site.css file and that moves across but I was under the impression that it would extend colors if I edited the config file.

I have also tried adding a plugin tailwindcss-elevation, it has been installed and added to the config file, but nothing has come through to the css either

plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('tailwindcss-multi-column')(),
    require('tailwindcss-debug-screens'),
    require('tailwindcss-elevation')(['responsive']),
  ],

is there something else I should be doing? or have i completely misunderstood how this works?

[rhukster]

Sorry, we’ve been out due to Memorial Day weekend. I’ll take a look at this tomorrow when I’m back at work. Cheers.

[rhukster]

The first thing I noticed is that in your first extend block you had color: when it should be colors:. In the current version of Typhoon there is already an extend block:

module.exports = {
  ...
  theme: {
    extend: {
    ...
      colors: {
        orange: colors.orange,
        transparent: 'transparent',
        'inherit': 'inherit',
        'primary': {
          DEFAULT: 'var(--color-primary)',
          'lighter': 'var(--color-primary__lighter)',
          'darker': 'var(--color-primary__darker)',
        },
        'gray': {
          900: '#1B1B1C',
          800: '#222222',
          700: '#2C2C2C',
          600: '#464646',
          500: '#939393',
          400: '#C4C4C4',
          300: '#DFDFDF',
          200: '#EEEEEE',
          100: '#F9F9F9',
        },
      },
...

Here we are adding the built in but unused orange color, as well as a transparent and inherit color. Then we have a primary color, and a fully overridden gray color.

You could try adding your color there:

module.exports = {
  ...
  theme: {
    extend: {
    ...
      colors: {
        brandtest: "#243c5a",
        orange: colors.orange,
        transparent: 'transparent',
        'inherit': 'inherit',
        'primary': {
          DEFAULT: 'var(--color-primary)',
          'lighter': 'var(--color-primary__lighter)',
          'darker': 'var(--color-primary__darker)',
        },
        'gray': {
          900: '#1B1B1C',
          800: '#222222',
          700: '#2C2C2C',
          600: '#464646',
          500: '#939393',
          400: '#C4C4C4',
          300: '#DFDFDF',
          200: '#EEEEEE',
          100: '#F9F9F9',
        },
      },
...

[digitalbirth]

Thank you, and to confirm once the tailwind.config.js in the active theme folder is edited and then i run npm run build in the active theme folder i should see the brandtest class added to my css file - build/css/site.css.

i ask because this is the part that doesnt seem to work

my default config file with brandtest added and a elevation plugin add in, but neither work also note that i had to comment out the JIT mode

im using npm version 7.13.0

module.exports = {
  // mode: 'jit',
  purge: { 
    enabled: true,
    content: normalize([
      '../../config/**/*.yaml',
      '../../pages/**/*.md',
      './blueprints/**/*.yaml',
      './js/**/*.js',
      './templates/**/*.twig',
      './dbau-v2.yaml',
      './dbau-v2.php',
      './available-classes.md',
    ])
  },
  theme: {
    extend: {
      inset: {
        '2': '0.5rem',
        'full': '100%',
        '1/2': '50%',
        '-1/2': '-50%',
        'inherit': 'inherit'
      },
      fontFamily: {
        sans: [
          'Inter var',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          'Roboto',
          '"Helvetica Neue"',
          'Arial',
          '"Noto Sans"',
          'sans-serif',
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
      },
      width: {
        'content': 'max-content',
      },
      maxHeight: {
        '0': '0',
      },
      lineHeight: {
        'tighter': '1.15',
      },
      strokeWidth: {
        '3/2': '1.5',
        '5/2': '2.5',
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: 'inherit',
            lineHeight: 'inherit',
            maxWidth: 'inherit',
            a: {
              transition: 'all 500ms',
              color: theme('colors.primary.DEFAULT'),
              '&:hover': {
                color: theme('colors.primary.darker')
              },
              textDecoration: 'none'
            },
            strong: {
              color: 'inherit'
            },
            code: {
              backgroundColor: theme('colors.gray.100'),
              color: theme('colors.indigo.600'),
              fontWeight: 'inherit'
            },
            pre: {
              backgroundColor: theme('colors.blue.100'),
              backgroundOpacity: theme('opacity-50'),
              color: theme('colors.blue.800'),
            },
          }
        }
      }),
    },
    colors: {
      // Removed Teal, Orange, Pink
      brandtest: "#243c5a",
      black: colors.black,
      white: colors.white,
      red: colors.red,
      green: colors.green,
      blue: colors.blue,
      orange: colors.orange,
      indigo: colors.indigo,
      transparent: 'transparent',
      'inherit': 'inherit',
      'primary': {
        DEFAULT: 'var(--color-primary)',
        'lighter': 'var(--color-primary__lighter)',
        'darker': 'var(--color-primary__darker)',
      },
      'gray': {
        900: '#1B1B1B',
        800: '#222222',
        700: '#2C2C2C',
        600: '#464646',
        500: '#939393',
        400: '#C4C4C4',
        300: '#DFDFDF',
        200: '#EEEEEE',
        100: '#F9F9F9',
      },
    },
    columnCount: [ 1, 2, 3, 4 ],
  },
  variants: {
    extend: {
      filter: ['hover', 'group-hover'],
      brightness: ['hover', 'group-hover'],
      scale: ['hover', 'group-hover'],
      borderWidth: ['last'],
    }
  },
  corePlugins: {
    gradientColorStops: false,
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('tailwindcss-multi-column')(),
    require('tailwindcss-debug-screens'),
    require('tailwindcss-elevation')(['hover']),
  ],
  darkMode: 'class',
}

[rhukster]

There are still quite a few JIT issues with Tailwind. https://github.com/tailwindlabs/tailwindcss/labels/jit if you are noticing something specific, you should create an issue on the Tailwind Issue tracker.

Regarding the elevation plugin, you just need to follow the instructions.

npm install tailwindcss-elevation

to install the. module package, then adding it to the plugins list in tailwind.config.js as you have done should do it. If that doesn't work you might need to create an issue on that plugin repo asking for help. Beyond my knowledge i'm afraid :)

[digitalbirth]

when i type it in vscode with intellisense installed it picks up the color

but yet when i load my site using ./bin/grav server the class is not used / available

Im sure i must be missing something, its got me baffled!!

[digitalbirth]

i have already installed elevation plugin through npm, if it was just the plugin, I would go to the author directly but as I am not getting the brand color or plugin i thought it may have something to do with me not processing the theme correctly

[rhukster]

Search the compiled build/css/site.css for .bg-brandtest and if it's there, it should be good to use.

[digitalbirth]

That's what I am searching (brandtest) and in that file but it is not there.

Are you able to add a color using this method on your system?

[rhukster]

I added the brandtest color per my example provided above. I observed that the npm run watch command saw the edit and recompiled. However, JIT only adds a class to the CSS when it's used. I added a bg-brandtest to one of my template files. Again I saw the change was picked up by watch and a recompile happened. This time when I searched the site.css i saw the class as expected:

Here's an output of the the watch command. The first recompile is when I added the color to the tailwind config, the second is when I added the bg-brandtest class to one of my templates that was in the JIT purge list of paths:

Finished css/site.css in 2.8 s
Processing css/site.css...
Finished css/site.css in 376 ms

Waiting for file changes...
Processing css/site.css...
Finished css/site.css in 147 ms

Waiting for file changes...

[digitalbirth]

Ok so it works for you so it must be my end, i have deleted node_modules and tried reinstalling, tried npm run build, npm run watch.

but only get this response

Thanks for trying to help, i think i may have to try work this out on my own

[digitalbirth]

I have fixed the issue,

for anyone else experiencing this issue

i have copied a fresh theme from typhoon, installed npm in the theme folder.

from there npm gives you an option to run npm audit fix or npm audit fix --force

SO DO NOT USE THESE OPTIONS IF YOU ARE HAVING ISSUES.

using these options seems to break tailwind.config.js from running.

yet again thank you @rhukster for helping