Previously, we have integrated tailwind and react using webpack. Now we will try to apply it to shared components in monorepo.
.
├── package.json
└── web
├── components
│ ├── babel.config.js
│ ├── package.json
│ ├── postcss.config.js
│ ├── src
│ │ ├── Button.js
│ │ ├── Header.js
│ │ ├── index.css
│ │ ├── index.js
│ │ └── stories
│ ├── tailwind.config.js
│ └── webpack.config.js
└── modules
├── home
│ └── package.json
└── root
├── src
│ ├── App.js
│ └── index.js
└── package.json
clone our previous branch: https://github.com/ynwd/monorepo/tree/storybook
install postcss & tailwind packages
npm i postcss postcss-cli postcss-import postcss-loader tailwindcss autoprefixer autoprefixer cssnano mini-css-extract-plugin -D
Update webpack config
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const devMode = process.env.NODE_ENV !== "production"
module.exports = {
mode: devMode ? "development" : "production",
entry: {
index: { import: "./src/index.js" }
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.css$/i,
use: [
devMode ? "style-loader" : MiniCssExtractPlugin.loader,
'css-loader',
"postcss-loader",
],
},
],
},
output: {
filename: "components.bundle.min.js",
library: 'fstrComponents',
libraryTarget: 'umd',
clean: true
},
plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
}
Create postcss config
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
require('cssnano')({
preset: 'default',
}),
],
};
Create tailwind config
module.exports = {
purge: [
'./src/**/*.js',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Create tailwind entrypoint
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Create custom components
/* src/Button.js */
import React from "react"
export const Button = ({ text = "" }) => {
return (
<button className="p-2 pl-5 pr-5 bg-red-500 text-gray-100 text-lg rounded-lg focus:border-4 border-blue-300">
{text}
</button>
)
}
/* src/Header.js */
import React from "react"
export const Header = ({ text = "" }) => {
return (
<div className="bg-blue-300 mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
<div className="sm:flex sm:items-center px-6 py-4">
<img className="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars.githubusercontent.com/u/10122431?s=400&v=4" alt="" />
<div className="text-center sm:text-left sm:flex-grow">
<div className="mb-4">
<p className="text-xl leading-tight">John Doe</p>
<p className="text-sm leading-tight text-grey-dark"> {text} </p>
</div>
</div>
</div>
</div>
)
}
Update react entry point. We import css file also.
/* src/index.js */
import { Button } from "./Button"
import { Header } from "./Header"
import "./index.css"
export {
Button,
Header
}
Update web/components/package.json script
{
...
"scripts": {
"build": "NODE_ENV=production webpack",
"build-watch": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
...
}
Compile
npm run build
Go to app root dir.
cd ../../
And don't forget to link the built package.
npm install
Import react-tailwind components
Update root module entry point. Import generated css from components.
/* web/modules/root/src/index.js */
import React from 'react'
import ReactDOM from 'react-dom'
import "@fstr/components/dist/index.css"
import App from './App'
import reportWebVitals from './reportWebVitals'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()
Update react app
/* web/modules/root/src/App.js */
import { Header, Button } from "@fstr/components"
function App() {
return (
<div>
<Header text="from root" />
<Button text="my button" />
</div>
)
}
export default App
Still in the app root folder, run this to see the changes
npm start -w @fstr/root
You can see the final source code on this branch: https://github.com/ynwd/monorepo/tree/tailwind
Top comments (0)