Storybook won't pick up tailwind changes unless you refresh the page

[halissonvit]

First, thanks for the great content. I love the course so far :)

I was following this lesson but found one issue:

After investigating it a bit more, I fixed it by adding and configuring the @storybook/addon-postcss. More specifically, modifying the project's .storybook/main.js to be:

const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../src/lib/**/*.stories.mdx',
    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    ...rootMain.addons,
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

After making these changes:

Notice I had to remove '@nrwl/react/plugins/storybook'

I figured others may run into the same issue, so hopefully this will be helpful.

[halissonvit]

FWIW, here is my package.json

{
  "name": "halissonvit",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@nrwl/next": "13.4.2",
    "@tailwindcss/typography": "^0.5.0",
    "autoprefixer": "^10.4.1",
    "core-js": "^3.6.5",
    "gray-matter": "^4.0.3",
    "next": "12.0.7",
    "postcss": "^8.4.5",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "regenerator-runtime": "0.13.7",
    "tailwindcss": "^3.0.8",
    "tslib": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.13",
    "@babel/preset-typescript": "7.12.13",
    "@nrwl/cli": "13.4.2",
    "@nrwl/cypress": "13.4.2",
    "@nrwl/devkit": "13.4.2",
    "@nrwl/eslint-plugin-nx": "13.4.2",
    "@nrwl/jest": "13.4.2",
    "@nrwl/linter": "13.4.2",
    "@nrwl/nx-cloud": "latest",
    "@nrwl/react": "13.4.2",
    "@nrwl/storybook": "13.4.2",
    "@nrwl/tao": "13.4.2",
    "@nrwl/web": "13.4.2",
    "@nrwl/workspace": "13.4.2",
    "@storybook/addon-essentials": "~6.4.5",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-webpack5": "~6.4.5",
    "@storybook/manager-webpack5": "~6.4.5",
    "@storybook/react": "~6.4.5",
    "@svgr/webpack": "^5.4.0",
    "@testing-library/react": "12.1.2",
    "@testing-library/react-hooks": "7.0.2",
    "@types/jest": "27.0.2",
    "@types/node": "^17.0.7",
    "@types/react": "17.0.30",
    "@types/react-dom": "17.0.9",
    "@typescript-eslint/eslint-plugin": "~5.3.0",
    "@typescript-eslint/parser": "~5.3.0",
    "babel-jest": "27.2.3",
    "babel-loader": "8.1.0",
    "chokidar": "^3.5.2",
    "cypress": "^9.1.0",
    "eslint": "8.2.0",
    "eslint-config-next": "12.0.7",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.26.1",
    "eslint-plugin-react-hooks": "4.2.0",
    "jest": "27.2.3",
    "next-mdx-remote": "^3.0.8",
    "prettier": "^2.3.1",
    "react-test-renderer": "17.0.2",
    "ts-jest": "27.0.5",
    "typescript": "~4.4.3",
    "url-loader": "^3.0.0"
  }
}

[niyowski]

@halissonvit , the following worked for me:

// preview.js
if (module.hot) {
  module.hot.accept();
}

Source: tailwindlabs/tailwindcss#6570 (comment)