How to Configure a React App with TypeScript, TailwindCSS, Yarn and Storybook
I am assuming that we have Yarn already installed on our system, we can check if yarn is installed by following the command:
yarn --versionIn 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 enableOn 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 typescriptInstall TailwindCSS & Generate ‘tailwind.config.js’ and ‘postcss.config.js’
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -pConfigure the template path
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}💡 Note: If you wish to reuse your styling rules across multiple projects, consider using open-source tools such as Bit. With Bit, you can encapsulate your styling rules into independent components and reuse across different projects.
Learn more:
Install Storybook
npx storybook initWe 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 storybookHere’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:
