Quiero agregar viento de cola al libro de cuentos. Para que Stories se muestre como lo hará en la web.
create-react-app project-name --template typescript para crear el proyecto.
Luego, para instalar Tailwind, seguí esta instrucción https://tailwindcss.com/docs/guides/create-react-app de la documentación de Tailwind.
Una vez que lo terminé, ejecuté el código npm sb init . Lo que aseguró que el libro de cuentos se publicara.
Ahora necesito contarle al libro de cuentos que use tailwindcss para diseñar. Pero no tengo idea de cómo.
Todas las demás respuestas que vi me dicen que edite los archivos postcss.config.js .
Pero seguí esta documentación de https://tailwindcss.com/docs/guides/create-react-app donde ni siquiera tuve que crear el archivo postcss.config.js. Así que estoy confundido sobre qué hacer ahora.
Para mayor claridad, incluiré un archivo de configuración a continuación.
craco.config.js
module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, } .storybook/preview.js
import "../src/index.css" export const parameters = { actions: { argTypesRegex: "^on[AZ].*" }, } .storybook/main.js
module.exports = { "stories": [ "../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-create-react-app" ] } src/index.css
@tailwind base; @tailwind components; @tailwind utilities; tailwind.config.js
module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } package.json
`{ "name": "memory", "version": "0.1.0", "private": true, "dependencies": { "@craco/craco": "^6.0.0", "@tailwindcss/postcss7-compat": "^2.0.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.8", "autoprefixer": "^9.8.6", "postcss": "^7.0.35", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.1", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2", "typescript": "^4.0.3", "web-vitals": "^0.2.4" }, "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject", "storybook": "start-storybook -p 6006 -s public", "build-storybook": "build-storybook -s public" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@storybook/addon-actions": "^6.1.11", "@storybook/addon-essentials": "^6.1.11", "@storybook/addon-links": "^6.1.11", "@storybook/node-logger": "^6.1.11", "@storybook/preset-create-react-app": "^3.1.5", "@storybook/react": "^6.1.11" } } tsconfig.json
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" ] }Ya casi estás ahí.
La pieza que falta en su configuración es agregar una configuración de paquete web para aplicar viento de cola a postcss-loader :
const path = require('path') module.exports = { stories: [ '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)' ], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app', ], webpackFinal: async (config) => { config.module.rules.push({ test: /\.css$/, use: [ { loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, ], include: path.resolve(__dirname, '../'), }) return config }, }La respuesta fue correcta pero en el último CRA tengo que configurar así:
config.module.rules.push({ test: /\.css$/, use: [ { loader: "postcss-loader", options: { // HERE: OPTIONS postcssOptions: { plugins: [require("tailwindcss"), require("autoprefixer")], }, }, }, ], include: path.resolve(__dirname, "../"), });Storybook recomienda usar @storybook/addon-postcss para personalizar la configuración de postCSS a partir de ahora (en lugar de confiar en la personalización de postcss-loader ):
Agregue el complemento postCSS a su instalación
npm i -D @storybook/addon-postcss # or yarn add -D @storybook/addon-postcss Cree el postcss.config.js en la raíz del proyecto
// postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } Agregue el complemento a su .storybook/main.js
// .storybook/main.js module.exports = { ... addons: [ ... { name: '@storybook/addon-postcss', options: { cssLoaderOptions: { // When you have splitted your css over multiple files // and use @import('./other-styles.css') importLoaders: 1, }, postcssLoaderOptions: { // When using postCSS 8 implementation: require('postcss'), }, }, }, ], }; Importe su archivo css en .storybook/preview.js
// .storybook/preview.js import '../src/styles.css';Similar a la respuesta de ofhouse, pero aquí hay una solución si no desea tener un postcss.config.js adicional por solo unas pocas líneas o si desea usar mecanografiado en todo (ya que el cargador no recoge postcss.config. .ts)
npm i -D @storybook/addon-postcss yarn add -D @storybook/addon-postcss /* .stories/main.ts */ import postcss from 'postcss'; import * as tailwindcss from '../tailwind.config'; import type { StorybookConfig } from '@storybook/react/types'; export const addons: StorybookConfig['addons'] = [ // other addons, { name: '@storybook/addon-postcss', options: { postcssLoaderOptions: { implementation: postcss, postcssOptions: { plugins: { tailwindcss, // or you can nest your options entirely here autoprefixer: { // autoprefixer options }, }, }, }, }, }, ]; /* tailwind.config.ts */ import type { TailwindConfig } from 'tailwindcss/tailwind-config'; export const theme: TailwindConfig['theme'] = { // theme options } // other options