Importing Tailwind & Material theme into my Storybook within NX namespace. | Storybook | Page 1

oak crown Mar 2, 2023, 3:06 PM

#

Can someone suggest a good solution? I am on the latest NX version.

sturdy spear Mar 2, 2023, 3:21 PM

#

Have you seen https://storybook.js.org/addons/@storybook/addon-styling from @narrow dome?

oak crown Mar 2, 2023, 3:31 PM

#

Hello, thank you, the recipes links seems to be dead

#

https://github.com/storybookjs/addon-style-toolbox/docs/getting-started/tailwind.md example

#

does it work for you?

sturdy spear Mar 2, 2023, 3:32 PM

#

Oh shoot, I thought that got fixed.

#

try it from here: https://github.com/storybookjs/addon-styling

#

@narrow dome should I stop sharing the link to the addon on the storybook webpage, and share the github link instead?

oak crown Mar 2, 2023, 3:35 PM

#

ok got it, thanks. hopefully to get some success 🙂

narrow dome Mar 2, 2023, 3:35 PM

#

Hey Ian! Yes please ❤️ I still need to replace the links so that the addon page can link out

#

@oak crown Let me know if you need a hand 😄

#

I know scss and postcss can still be a little fiddly 😅 I'm trying to simplify it now

#

Is your NX project going to be Angular?

oak crown Mar 2, 2023, 3:37 PM

#

narrow dome <@289381987301588993> Let me know if you need a hand 😄

i might! 🙂 i am new to storybook. I am in latest NX namespace, I generated shared angular library with some components and generated Storybook for it. Just having issues to add styles and assets similarly to how Apps leveraging these assets

#

for now i added styles to project.json under build-storybook > options

naive lintel Mar 2, 2023, 3:42 PM

#

In the meantime, here's the correct link: https://github.com/storybookjs/addon-styling/blob/main/docs/getting-started/tailwind.md

GitHub

addon-styling/tailwind.md at main · storybookjs/addon-styling

A base addon for configuring popular styling tools - addon-styling/tailwind.md at main · storybookjs/addon-styling

oak crown Mar 2, 2023, 3:43 PM

#

Thanks, already there. Do i need something else for scss?

#

for example i have scss file with imports

#

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

naive lintel Mar 2, 2023, 3:44 PM

#

At this point, I'll tag in the addon/recipe author, @narrow dome.

narrow dome Mar 2, 2023, 3:45 PM

#

👋

#

Can you share your storybook main.js and preview.js files?

oak crown Mar 2, 2023, 3:46 PM

#

module.exports = {
core: { builder: 'webpack5' },
stories: ['..//*.stories.mdx', '..//*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-essentials',
'@storybook/addon-links',
'@storybook/addon-interactions',
'@storybook/addon-a11y',
// '@storybook/preset-scss',
// '@storybook/addon-styling',
],
framework: '@storybook/angular',
};

#

preview is empty atm

#

i also modified project.json for that shared library

#

"build-storybook": {
"executor": "@storybook/angular:build-storybook",
"outputs": ["{options.outputDir}"],
"options": {
"outputDir": "dist/storybook/lib-shared",
"configDir": "libs/lib-shared/.storybook",
"browserTarget": "lib-shared:build-storybook",
"compodoc": false,
"styles": [
"styles/default/colors.scss",
"styles/default/material-theme.scss",
"styles/default/tailwind-imports.scss"
]
},
"configurations": {
"ci": {
"quiet": true
}
}
}

narrow dome Mar 2, 2023, 3:49 PM

#

So preview.js is where you'll want to import that scss file with your tailwind imports

oak crown Mar 2, 2023, 3:49 PM

#

ok

narrow dome Mar 2, 2023, 3:49 PM

#

you'll want to import all those scss files

#

(It might not all work out of the box but we'll take it from there :D)

oak crown Mar 2, 2023, 3:52 PM

#

narrow dome (It might not all work out of the box but we'll take it from there :D)

thank you for the hard work!

narrow dome Mar 2, 2023, 3:53 PM

#

It's no problem at all, Bio 😄 I'm happy to help

oak crown Mar 2, 2023, 3:53 PM

#

import "styles/default/tailwind-imports.css";

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
expanded: true,
hideNoControlsWarning: true,
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};

#

in preview

#

lets see if works

#

then will try with .scss

narrow dome Mar 2, 2023, 3:58 PM

#

Funnily enough, I think your scss imports are going to work but your tailwind.css might not 😅 😂

oak crown Mar 2, 2023, 3:58 PM

#

ok kicked a build now, lets see

narrow dome Mar 2, 2023, 4:00 PM

#

🤞

#

The suspense is killing me 👀

#

https://giphy.com/gifs/tim-curry-rocky-horror-picture-show-anticipation-fV7xZPk6aeiUU

Giphy

oak crown Mar 2, 2023, 4:14 PM

#

#

it does not import tailwind

#

the rest seems to work by just adding .scss files into the build process in project.json without doing any addons

narrow dome Mar 2, 2023, 4:18 PM

#

Okay, perfect 🙂 So that will be because tailwind needs postcss 🙂

oak crown Mar 2, 2023, 4:19 PM

#

it didnt work with postcss

narrow dome Mar 2, 2023, 4:19 PM

#

We'll get it working 🙂

#

add this into your main.js addons:

{
   name: "@storybook/addon-styling",
   options: {
     postCss: true,
   },
},

oak crown Mar 2, 2023, 4:20 PM

#

narrow dome Mar 2, 2023, 4:21 PM

#

Also add this postcss.config.js file to your project root:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

oak crown Mar 2, 2023, 4:22 PM

#

narrow dome Also add this `postcss.config.js` file to your project root: ```js module.expor...

trying now

oak crown Mar 2, 2023, 4:29 PM

#

narrow dome Also add this `postcss.config.js` file to your project root: ```js module.expor...

still no luck even with postcss.config.js file

narrow dome Mar 2, 2023, 4:29 PM

#

What error(s) do you get?

oak crown Mar 2, 2023, 4:29 PM

#

no errors

#

just no styles in the preview

narrow dome Mar 2, 2023, 4:30 PM

#

Interesting! That's okay 🙂 we'll get it

#

If you look into the dev tools panel in your browser, are there any errors in there?

oak crown Mar 2, 2023, 4:31 PM

#

btw .scss file didnt work

#

importing as .css

#

i have just for missing svg files, that the next thing i would need to solve.

#

but its unrelated

narrow dome Mar 2, 2023, 4:32 PM

#

Okay 🙂

#

Let's see...

oak crown Mar 2, 2023, 4:33 PM

#

narrow dome Mar 2, 2023, 4:34 PM

#

Can you change the import for your tailwind files to this:

@tailwind base;
@tailwind components;
@tailwind utilities;

oak crown Mar 2, 2023, 4:34 PM

#

ok lets try

#

rebuilding

#

that's how i had it initially

narrow dome Mar 2, 2023, 4:36 PM

#

brb taking my dogs out 🙂

oak crown Mar 2, 2023, 4:40 PM

#

narrow dome brb taking my dogs out 🙂

sounds good

narrow dome Mar 2, 2023, 4:47 PM

#

How did it go? Just trying to wrangle in the last dog

oak crown Mar 2, 2023, 4:49 PM

#

i think i saw the styles appear for a moment and then gone

#

removing stuff from build process

#

rebuilding again

narrow dome Mar 2, 2023, 4:51 PM

#

Well that sounds like a positive! maybe we're onto something here 👀

narrow dome Mar 2, 2023, 5:48 PM

#

Just checking in 😄 how'd it go?

oak crown Mar 2, 2023, 6:27 PM

#

Hello, sorry was in meetings and lunch break.

#

lemme get back to it

narrow dome Mar 2, 2023, 6:27 PM

#

It's all good 👍

oak crown Mar 2, 2023, 6:38 PM

#

still doesnt work

#

interesting if i put my own styles in that file with imports to tailwind

#

my styles work

#

narrow dome Mar 2, 2023, 6:51 PM

#

Yeah, so the postcss setting aren't being applied

#

Oh!

#

Let me see your tailwind.config.js!!!

oak crown Mar 2, 2023, 7:02 PM

#

ok

#

tailwin.config.js is in application not in the library

#

const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');

/** @type {import('tailwindcss').Config} /
module.exports = {
content: [
join(__dirname, 'src/**/!(.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
],
theme: {
extend: {},
fontFamily: {
roboto: ['Roboto', 'sans-serif'],
},
},
plugins: [],
};

#

do i need to include this into main.js somehow?

narrow dome Mar 2, 2023, 7:09 PM

#

Nope... but without reading the components in your library it won't build your tailwind classes for your library components

oak crown Mar 2, 2023, 7:10 PM

#

ok, so what do i need to do?

narrow dome Mar 2, 2023, 7:11 PM

#

Can you copy this file into your library folder?

oak crown Mar 2, 2023, 7:11 PM

#

NX Generating @nrwl/angular:setup-tailwind

NX The target "build" was not found for project "lib-shared".

If you are using a different build target, please provide it using the "--buildTarget" option.
If the project is not a buildable or publishable library, you don't need to setup TailwindCSS for it.
Pass --verbose to see the stacktrace.

#

ok lemme copy

#

nx + angular libs + storybook + tailwind = is tricky 🙂

#

copying tailwind.config.js into the root of the library didn't help. What should I try next?

narrow dome Mar 2, 2023, 7:19 PM

#

Are you trying to use tailwind classes in your library components?

oak crown Mar 2, 2023, 7:19 PM

#

yes

#

#

the crazy thing, i see tailwind styles at the very 1st moment after i rebuild the app and it reloads the page

#

then it goes away

narrow dome Mar 2, 2023, 7:21 PM

#

hmmm okay

oak crown Mar 2, 2023, 7:21 PM

#

like for a fraction of a second

narrow dome Mar 2, 2023, 7:21 PM

#

That is odd

oak crown Mar 2, 2023, 7:22 PM

#

agreed

sturdy spear Mar 2, 2023, 7:22 PM

#

It might be helpful if you start a new project and slowly try to match your config, and see if you can reproduce the issue

oak crown Mar 2, 2023, 7:23 PM

#

narrow dome Mar 2, 2023, 7:23 PM

#

I was about to ask, what steps can I take to reproduce your NX repro structure

sturdy spear Mar 2, 2023, 7:24 PM

#

Are you using storyStoreV7: false?

oak crown Mar 2, 2023, 7:24 PM

#

just one app, one lib that has a storybook

#

and 1 component

#

where do i need to set it?

sturdy spear Mar 2, 2023, 7:24 PM

#

you shouldn't have to

oak crown Mar 2, 2023, 7:24 PM

#

i have 6.5+ installed

sturdy spear Mar 2, 2023, 7:24 PM

#

ah, ok I thought you were on 7.

oak crown Mar 2, 2023, 7:24 PM

#

nop

narrow dome Mar 2, 2023, 7:48 PM

#

I'm not super familiar with NX so you'll have to bare with me here. Are you using a package based project or integrated project?

#

Have you got some nx commands I can run to get something pulled together?

oak crown Mar 2, 2023, 7:50 PM

#

integrated

#

npx create-nx-workspace

#

pick integrated > angular with single app

narrow dome Mar 2, 2023, 7:55 PM

#

It's creating itself now

oak crown Mar 2, 2023, 7:56 PM

#

need to install @nrwl/storybook i think

#

i forgot the steps

#

here is my package.json deps:

#

ehh discord doesnt like it

#

and i dont have nitro

#

📎 package.json

narrow dome Mar 2, 2023, 8:17 PM

#

So NX says you shouldn't need tailwind in a library but it you want the components in your library to use tailwind classes it needs to be in there

#

Do you have a postcss.config.js file in your lib root?

#

I think I know why it wouldn't let you add tailwind to the library... It wants your library to be buildable or publishable

#

Where as for Storybook you typically want to have tailwind rebuild on change so you can see the changes without needing to rebuild the library and relaunch storybook

oak crown Mar 2, 2023, 9:08 PM

#

narrow dome Do you have a postcss.config.js file in your lib root?

it has to be in root not in .storybook?

#

ok

narrow dome Mar 2, 2023, 9:37 PM

#

Okay... so this is clearly a little bit trickier to fiddle with... I might need to work with the NX team on this one

#Importing Tailwind & Material theme into my Storybook within NX namespace.