CRL + TailwindCSS?

[ashleyisles]

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:

"scripts": {
    "build:style": "postcss src/styles/tailwind.css -o src/index.css",
    "prebuild": "npm run build:style",
    "prestart": "npm run build:style",
    "build": "microbundle-crl --no-compress --css-modules false --format modern,cjs",
    "start": "microbundle-crl watch --no-compress --css-modules false --format modern,cjs",
    ...
  },

[mklef121]

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.

[mohux]

Would anyone show a full implementation of tailwind is CRL?

[mklef121]

Would anyone show a full implementation of tailwind is CRL?

@mohux Do you need a gist or can I post it here ?

[qnkhuat]

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.

[qnkhuat]

oh, I forgot to add the postcss.config.js file. Now it's worked.

[AsheshL]

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.

[AsheshL]

I am using the compat version of tailwind for postcss v7 and it's working fine now

[ahmedsayedabdelsalam]

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

[rathod-sahaab]

@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.

[ahmedsayedabdelsalam]

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