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

jacebenson commented 2 years ago

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?

thedavidprice commented 2 years ago

@jacebenson I can't reproduce an error locally on my test project. I'm running yarn rw setup ui tailwindcss followed by yarn rw sb and everything works fine.

Can you share your tailwindcss config?

Also, can you paste the output from yarn rw info?

jacebenson commented 2 years ago

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

dthyresson commented 2 years ago

@thedavidprice I can see this with v0.43

vs

yarn rw info

  System:
    OS: macOS 12.1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - /var/folders/ft/8320mthj6gbdd2pmc42x13480000gn/T/yarn--1643997422423-0.6035660934236191/node
    Yarn: 1.22.17 - /var/folders/ft/8320mthj6gbdd2pmc42x13480000gn/T/yarn--1643997422423-0.6035660934236191/yarn
  Databases:
    SQLite: 3.36.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 98.0.4758.80
    Safari: 15.2
  npmPackages:
    @redwoodjs/core: v0.43.0 => 0.43.0 

✨  Done in 2.44s.

tailwind config:

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

simoncrypta commented 2 years ago

I already saw this problem before, I think everything work when it uses with JIT. I think @jtoar can confirm this ?

dthyresson commented 2 years ago

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?

dthyresson commented 2 years ago

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.

thedavidprice commented 2 years ago

@dthyresson Good work diagnosing this one! Do you have suggestions about next steps. Some reactions on my part:

I'm not sure how to prioritize this; Storybook for Scaffolds doesn't seem important to me
...unless someone is modifying and gets confused 'cause they won't work
reworking the tailwind Scaffold css template to not use @apply makes the most sense if we try to "fix" this; seems like a lot of work
most straightforward for me is just visibility about what's happening so people can resolve if/as needed, but other than adding a comment to the top of the template css, I don't know how we can communicate prominently/obviously

Thoughts?

simoncrypta commented 2 years ago

Storybook for Scaffolds doesn't seem important to me

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

virtuoushub commented 2 years ago

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

?

william-stafflink commented 2 years ago

Hey all I am having the same issue and have tried the solution above to no avail...anyone been able to find a workaround?

virtuoushub commented 2 years ago

Hey all I am having the same issue and have tried the solution above to no avail...anyone been able to find a workaround?

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
 */
...

william-stafflink commented 2 years ago

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

virtuoushub commented 2 years ago

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

sorry to hear you are running into this issue. without more of a reproduction case, it is going to be difficult to troubleshoot. If you can crate a minimal repo which demonstrates your issue, I'll be happy to take a look.

carlosblanc0 commented 2 years ago

[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" }

kaustavkarmakar2 commented 1 year ago

Storybook is not taking inline tailwind css...like

SegopotsoMakhutja commented 1 year ago

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.

redwoodjs / redwood

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