Chapter 5 Missing CSS - Githubissues

After importing the twig files from storybook I expected that the styles would be imported from storybook as well. However, while the twig templates were appropriately imported from storybook, the styles shown in storybook were not. Perhaps this was the intention, but any indication that this is the case seems to be omitted. Either that or I have missed something in the book so far.

If I was not mistaken it means that the styles included in storybook must be manually included the alps trips theme itself. The styles which are not reflected in the theme are as follows:

The nord color pallete
The tailwind typography plugin
The tailwind forms plugin

To remedy this I installed the tailwind CSS plugins in the theme directory npm install @tailwindcss/typography @tailwindcss/forms and added the safelist and theme properties to the module.exports object in project/web/themes/custom/alps_trips/tailwind.config.js. The file now appears as such:

const typography = require('@tailwindcss/typography');
const forms = require('@tailwindcss/forms');

module.exports = {
  content: [
    './templates/**/*.html.twig',
    '../../../../storybook/stories/**/*.html.twig',
    './js/**/*.js',
  ],
  safelist: [
    'text-nord-0',
    'text-nord-1',
    'text-nord-2',
    'text-nord-3',
    'text-nord-4',
    'text-nord-5',
    'text-nord-6',
    'text-nord-7',
    'text-nord-8',
    'text-nord-9',
    'text-nord-10',
    'text-nord-11',
    'text-nord-12',
    'text-nord-13',
    'text-nord-14',
    'text-nord-15',
  ],
  theme: {
    extend: {
      colors: {
        'nord-0': '#2E3440',
        'nord-1': '#3B4252',
        'nord-2': '#434C5E',
        'nord-3': '#4C566A',
        'nord-4': '#D8DEE9',
        'nord-5': '#E5E9F0',
        'nord-6': '#ECEFF4',
        'nord-7': '#8FBCBB',
        'nord-8': '#88C0D0',
        'nord-9': '#81A1C1',
        'nord-10': '#5E81AC',
        'nord-11': '#BF616A',
        'nord-12': '#D08770',
        'nord-13': '#EBCB8B',
        'nord-14': '#A3BE8C',
        'nord-15': '#B48EAD',
      },
    },
  },
  plugins: [typography, forms],
}

Is this an error or omission in the book?
If so, was this the correct resolution?
If not, what is the correct approach?

Thanks for your time, hope this helps anyone else.

PacktPublishing / Modernizing-Drupal-10-Theme-Development

Chapter 5 Missing CSS #35