Open ashleyisles opened 3 years ago
Hello @ashleyisles I used tailwind with Create React Library. It was easy to use since microbundle
uses rollup (Which uses a postcss plugin internally).
"scripts": {
"build": "NODE_ENV=production microbundle-crl --no-compress --css-modules false --format modern,cjs",
"start": "microbundle-crl watch --css-modules false --no-compress --format modern,cjs",
....
},
Then in my tailwind file, I use
/*css/tailwind.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
In the Javascript file, just import the tailwind css file
// src/index.js
import React,{Fragment} from 'react';
import './css/tailwind.css';
export const ExampleComponent = ({ text }) => {
return (
<>
<div className ="example">
</div>
</>
);
}
Make sure you have a tailwind.config.js
with all the purge options set. This will help produce a minified build at production.
Would anyone show a full implementation of tailwind is CRL?
Would anyone show a full implementation of tailwind is CRL?
@mohux Do you need a gist or can I post it here ?
Hello @ashleyisles I used tailwind with Create React Library. It was easy to use since
microbundle
uses rollup (Which uses a postcss plugin internally)."scripts": { "build": "NODE_ENV=production microbundle-crl --no-compress --css-modules false --format modern,cjs", "start": "microbundle-crl watch --css-modules false --no-compress --format modern,cjs", .... },
Then in my tailwind file, I use
/*css/tailwind.css*/ @tailwind base; @tailwind components; @tailwind utilities;
In the Javascript file, just import the tailwind css file
// src/index.js import React,{Fragment} from 'react'; import './css/tailwind.css'; export const ExampleComponent = ({ text }) => { return ( <> <div className ="example"> </div> </> ); }
Make sure you have a
tailwind.config.js
with all the purge options set. This will help produce a minified build at production.
Hi, I'm following your modification, but I don't see the CSS bundled after building the package.
oh, I forgot to add the postcss.config.js file. Now it's worked.
Followed all the steps provided and getting this error even though postcss is v8.3.5 (postcss plugin) Error: PostCSS plugin tailwindcss requires PostCSS 8.
I am using the compat version of tailwind for postcss v7 and it's working fine now
oh, I forgot to add the postcss.config.js file. Now it's worked.
can you share the config please, it is not bundled in index.js
@ahmedsayedabdelsalam Here is the project I got working I have linked the setup commit it's almost base so you can copy everything it uses typescript through github > react-real > setup.
mmit it's almost base so you can co
Thanks for you response. I see in the example app you need to include the css bundle, not included in the js bundle
Hi!
I'm trying to use Create React Library with TailwindCSS and was wondering if there's a way to include the CSS in the bundle without having to add
import '<package_name>/dist/index.css'
into my target repo?My scripts look like this: