This content originally appeared on Bits and Pieces - Medium and was authored by Soheb M
I am assuming that we have Yarn already installed on our system, we can check if yarn is installed by following command:
yarn --version
In case we do not have yarn installed on our system, and if we are using Node.js >= 16.10 then we can run the following command to enable corepack:
corepack enable
On Windows PC run the above command as an administrator. I have not tried it on Mac or Linux, comment and let me know if the above command requires superuser access in Mac or Linux. As per Node.js documentation, the corepack identifies the package manager and installs in the background if needed without any user interaction. This means we do not have to run additional command to install yarn.
Create a new React project with Yarn
yarn create react-app your-project-name --template typescript
Install TailwindCSS & Generate ‘tailwind.config.js’ and ‘postcss.config.js’
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p
Configure the template path
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Install Storybook
npx storybook init
We have to run the above in the existing projects, it cannot be run on empty project. Even though we are using npx, it will automatically choose yarn to install the required dependencies, and that’s about it. Thank you.
Run Storybook
yarn storybook
Here’s a complete Github Repo if you want to get up and running right now.
Build apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- The Bit Blog
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
How to Configure a React App with TypeScript, TailwindCSS, Yarn and Storybook was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Soheb M
Soheb M | Sciencx (2022-10-21T15:07:50+00:00) How to Configure a React App with TypeScript, TailwindCSS, Yarn and Storybook. Retrieved from https://www.scien.cx/2022/10/21/how-to-configure-a-react-app-with-typescript-tailwindcss-yarn-and-storybook/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.