redwood: Storybook is not applying Tailwind CSS styles when working on components that use Redwood scaffold tailwind styles

When I use yarn rw storybook the styles applied from my project are not applied in storybook to the component. I’m not sure how to set that up or even where that is?

@jacebenson What about making/editing a web/config/storybook.preview.js to include

import '../src/scaffold.css' // this is less important, and not tailwind specific, by default it just helps normalize CSS styles
import '../src/index.css' // by default this is where tailwind is imported

?

[TSX] Ran into the exact same issue this morning. my workaround is that instead of using this:

I tried the following tailwind config with and without purge options:

module.exports = {
  content: ['src/**/*.{js,jsx,ts,tsx}'],
  mode: 'jit',
  // purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

But still no style rendering in storybook.

Could it be the way RW scaffold use tailwind scaffolds styles that use @apply?

I went with this:

module.exports = {
  content: './src/**/*.tsx',
 // mode: 'jit',
  // purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Cleared cache, restarted both servers (redundant, I know), and it’s now working as expected.

Software:

System Software Overview:

  System Version: macOS 12.6 (21G115)
  Kernel Version: Darwin 21.6.0
  Boot Volume: Macintosh HD - Data
  Boot Mode: Normal
  Computer Name: Carlos’s MacBook Pro
  User Name: Carlos A. Blanco (carlosa.blanco)
  Secure Virtual Memory: Enabled
  System Integrity Protection: Enabled
  Time since boot: 3 days 2:18

Hardware:

Hardware Overview:

  Model Name: MacBook Pro
  Model Identifier: MacBookPro13,3
  Processor Name: Quad-Core Intel Core i7
  Processor Speed: 2.6 GHz
  Number of Processors: 1
  Total Number of Cores: 4
  L2 Cache (per Core): 256 KB
  L3 Cache: 6 MB
  Hyper-Threading Technology: Enabled
  Memory: 16 GB
  System Firmware Version: 451.140.1.0.0
  OS Loader Version: 540.120.3~22
  SMC Version (system): 2.38f12

Environment

“devDependencies”: { “@babel/core”: “^7.19.3”, “@storybook/addon-actions”: “^6.5.12”, “@storybook/addon-essentials”: “^6.5.12”, “@storybook/addon-interactions”: “^6.5.12”, “@storybook/addon-links”: “^6.5.12”, “@storybook/builder-vite”: “^0.2.4”, “@storybook/react”: “^6.5.12”, “@storybook/testing-library”: “^0.0.13”, “@types/react”: “^18.0.17”, “@types/react-dom”: “^18.0.6”, “@vitejs/plugin-react”: “^2.1.0”, “autoprefixer”: “^10.4.12”, “babel-loader”: “^8.2.5”, “postcss”: “^8.4.18”, “tailwindcss”: “^3.1.8”, “typescript”: “^4.6.4”, “vite”: “^3.1.0” }

if anyone runs into this issue again and they’ve configured a prefix for their classNames in tailwind.config, consider removing it. for me that was the reason the styles were not being applied.

Hi @william-stafflink do you have a public repo I can take a look at where this is happening?

regardless, a simple check is to confirm the web/src/index.css file exists. and contains something like these lines:

...
/**
 * START --- SETUP TAILWINDCSS EDIT
 *
 * `yarn rw setup ui tailwindcss` placed these imports here
 * to inject Tailwind's styles into your CSS.
 * For more information, see: https://tailwindcss.com/docs/installation#include-tailwind-in-your-css
 */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/**
 * END --- SETUP TAILWINDCSS EDIT
 */
...

Hi @virtuoushub unfortunately no public repo. Running Index.css exactly as the above

/**
 * START --- SETUP TAILWINDCSS EDIT
 *
 * `yarn rw setup ui tailwindcss` placed these imports here
 * to inject Tailwind's styles into your CSS.
 * For more information, see: https://tailwindcss.com/docs/installation#include-tailwind-in-your-css
 */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/**
 * END --- SETUP TAILWINDCSS EDIT
 */
.player-wrapper {
  position: relative;
  padding-top: 56.25%; /* 720 / 1280 = 0.5625 */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

and Importing it from web/src/styles/index.css and have tried running from web/src/index.css

• Storybook for Scaffolds doesn’t seem important to me

I agree with you, I think it should only be communicated

Could it be the way RW scaffold use tailwind scaffolds styles that use @apply?

Yup, that’s the issue. If you use tailwind css in your component like:

      <div className="bg-slate-500 p-12">
...

then

The styling applied.

So, the issue is that scaffold that use the RW tailwind stylesheet styles are not rending in storybook.

Edit: Updated issue title to be more descriptive.

In fact, Tailwind CSS discourages the use of @apply; see: https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you, for example:

You have to think up class names all the time — nothing will slow you down or drain your energy like coming up with a class name for something that doesn’t deserve to be named.

You have to jump between multiple files to make changes — which is a way bigger workflow killer than you’d think before co-locating everything together.

Changing styles is scarier — CSS is global, are you sure you can change the min-width value in that class without breaking something in another part of the site?

Your CSS bundle will be bigger — oof.

If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice.

So, now the real only choice for me if I want to scaffold is to use custom scaffold templates for the generators and rework the css – which I may want to do since these displays all use tables instead.

I think what I really want are generator templates that use Tailwind UI markup and styles with a base color that is used for variants.

I’ll see if I can recreate it with a fresh project. This came up in a discussion on maker hour.