Seamlessly incorporating Storybook with Tailwind CSS, Create Next App, and TypeScript

*This is a new question regarding my struggles with integrating Storybook and Tailwind CSS. Despite following the recommended steps, I am unable to make Tailwind work within Storybook. Here's what I've done:

I started a TypeScript project from scratch using Create Next App and successfully implemented Tailwind CSS in the application. Then, I set up Storybook according to their guidelines and configured the main.js file to include PostCSS for Tailwind integration:

  1. Created a new TypeScript project with Tailwind
  2. Set up Storybook as per the documentation
  3. Configured the main.js file for PostCSS integration with Tailwind

Despite these efforts, I can't see any impact of Tailwind on the components within Storybook - it only works in the main application. I even tried adding a small element to test if Tailwind is functioning properly, but it didn't render as expected.

If anyone could provide assistance, it would be greatly appreciated!

typescriptnext.jstailwind-cssstorybookpostcss

Answer №1

Good news!

This simple solution did the trick:

Bring in

import 'tailwindcss/tailwind.css';

to preview.js

Credit to

Answer №2

Make sure to update the tailwind.config.js file by including the path to the stories folder.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./stories/**/*.{js,ts,jsx,tsx}", //specify that Tailwind should also read files in the stories folder
  ],
  theme: {},
  plugins: [],
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Importing TypeScript modules dynamically can be achieved without the need for Promises

I find myself in a scenario where the dynamic nature of these commands is crucial to prevent excessive loading of unnecessary code when executing specific command-line tasks. if (diagnostics) { require('./lib/cli-commands/run-diagnostics').run ...

node.jstypescripttypescript2.0

Clerk.dev encountered an unexpected runtime error: TypeError - Unable to retrieve data

I've been following the official T3 stack tutorial, but I'm currently facing an issue with clerk authentication. I made modifications to my _app.tsx as shown below: import { type AppType } from "next/app"; import { api } from "~/u ...

authenticationnext.jscorst3clerk

Required Field Validation - Ensuring a Field is Mandatory Based on Property Length Exceeding 0

When dealing with a form that includes lists of countries and provinces, there are specific rules to follow: The country field/select must be filled out (required). If a user selects a country that has provinces, an API call will fetch the list of provinc ...

javascriptreactjstypescriptvalidationyup

Angular2: Ensuring Sequential Execution Line by Line - A Comprehensive Guide

I have a designed an Angular2 Navbar Component that features a logout button: import { Component, OnInit } from '@angular/core'; import { LoginService } from '../login.service'; import { Router } from '@angular/router'; @Co ...

angulartypescript

A guide on leveraging SWR in Next.js to instantly update a data feed

I'm currently working on a form component for user comments, along with a separate component that displays a list of those comments. However, I've encountered an issue where the newly submitted comment only appears once the page is refocused. Is ...

reactjsnext.jsswr

Is there a different approach available since the array function "some" does not restrict type even when a type predicate is implemented?

It is expected that when using the array function "some" along with a type predicate and return statement, the TypeScript compiler would narrow down the type of dashArray. Is it reasonable to expect this behavior from the TypeScript compiler or am I incor ...

arraystypescript

What is the best way to restrict a mapped type in typescript to only allow string keys?

In the Typescript documentation, I learned about creating a mapped type to restrict keys to those of a specific type: type OptionsFlags<Type> = { [K in keyof Type]: boolean; }; If I want to use a generic type that only accepts strings as values: t ...

typescript

Enforcing HTTPS in Next.js version 13

I've encountered a challenge while working with Next.js 13 and Heroku - there seems to be limited information on handling SSL with this combination. Although I have implemented a solution derived from this blog post below, Google is not happy with the ...

reactjsherokunext.js

Issue with bi-directional data binding in Angular's matInput component

When working on my template... <input matInput placeholder="Amount" [(value)]="amount"> In the corresponding component... class ExampleComponent implements OnInit { amount: number = 0; ... } The binding doesn't seem to work as expect ...

angulartypescript

Break apart the string and transform each element in the array into a number or string using a more specific type inference

I am currently working on a function that has the ability to split a string using a specified separator and then convert the values in the resulting array to either strings or numbers based on the value of the convertTo property. Even when I call this fun ...

arraystypescripttypescript-typings

Option to modify the arguments of a method in a parent class

I encountered an interesting problem recently. I have two classes: class Animal { public talk() { console.log('...'); } } and class Dog extends Animal { public talk(noise: string) { console.log(noise); super.talk() } } The i ...

typescriptinheritanceparent-child

What is the best way to manage data types using express middleware?

In my Node.js project, I am utilizing Typescript. When working with Express middleware, there is often a need to transform the Request object. Unfortunately, with Typescript, it can be challenging to track how exactly the Request object was transformed. If ...

node.jsexpresstypescript

What could be causing the sanity cli to encounter an error during installation?

I'm facing an issue while attempting to execute the following commands: npm install -g @sanity/cli >> sanity init --coupon javascriptmastery2022 and this error message is displayed: sanity : File C:\Users\...\AppData\Roaming ...

node.jspowershellnext.jssanity

Navigating through Objects in Angular 9

I am facing a challenge in Angular 9/Typescript while trying to iterate through the object response from my JSON data. Despite searching for solutions, I haven't found any that work for me. In my JSON, there is a section called "details" which contain ...

javascriptangulartypescriptoopobject

Issue with NextJS Runtime: "invalid objects" detected during iteration in a for-loop

Previously, I had an issue trying to figure out how to create custom layouts for my objects in Next.js using a list of items (similar to data.map). (React / NextJS define Elements ni map) A helpful solution was provided: (https://codesandbox.io/s/funny-v ...

reactjsnext.jsruntime-error

What type of HTML tag does the MUI Autocomplete represent?

Having trouble calling a function to handle the onchange event on an autocomplete MUI element. I've tried using `e: React.ChangeEvent`, but I can't seem to locate the element for the autocomplete component as it throws this error: The type &apos ...

typescriptmaterial-ui

Using Jest and Supertest for mocking in a Typescript environment

I've been working on a mock test case using Jest in TypeScript, attempting to mock API calls with supertest. However, I'm having trouble retrieving a mocked response when using Axios in the login function. Despite trying to mock the Axios call, I ...

typescriptjestjssupertest

Why is the quantity of my item being increased? My method is adding it when it shouldn't be

I have a project in Angular that involves an online store. However, every time I click the button "agregar a carrito" (add to cart in Spanish), my item's quantity seems to increase inexplicably. ts. removeItem(item: iProduct) { if (item.quantity ...

angulartypescript

Having trouble with `Routes.push()` in NextJS?

When attempting to access the app dashboard without authentication, I wanted to redirect the user to the homepage. However, I encountered an issue with Route.push() not working as expected. To test this behavior further, I modified Router.push('/&apo ...

reactjsroutestokennext.js

Encountering a 504 Timeout Error with Next.js and Next-Auth on our live server

After successfully developing a basic Next.js app with authentication using Next-Auth, I encountered a peculiar issue upon deployment to my production server. Despite configuring the environment variables accordingly in the .env.local file, I faced a persi ...

next.jsstrapinext.js13next-auth