search

20lives / tailwindcss-rtl

Enabling bidirectional support on tailwindcss framework
MIT License
347 stars 33 forks source link

Support for ESM #35

Closed SimonTheBaptist closed 2 years ago

SimonTheBaptist commented 2 years ago

I can't get tailwindcss-rtl to work in Angular 12 when using ESM ("type": "module" in package.json). Steps to reproduce:

Working version:

  1. Create a simple Angular 12 project using the CLI with "ng new a", select 'add Routing' and use SCSS.

  2. Install tailwindcss with "npm i tailwindcss" and init it with "npx tailwindcss init". The version it installed was 2.2.7.

  3. Install tailwindcss-rtl with "npm i -D tailwindcss-rtl". The version it installed was 0.7.3.

  4. Add "require('tailwindcss-rtl')" to the 'plugins' section in the 'tailwind.config.js' file.

  5. Add the following lines to 'src/styles.scss':

    @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

  6. Add the following lines at the end of the 'src/app/app.component.html' file:

    <div dir="rtl" style="width: 100%;">
<button class="ms-4 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400">Hello</button>
</div>

  7. Run it with "ng serve". I'm using VS-Code so I created a Chrome configuration in launch.json with "url": "http://localhost:4200".

  8. As you can see, the "ms-4" directive adds a margin before the "Hello" button at the bottom of the page. "ms-4" is translated to "margin-inline-start: 1rem;".

Converting it to using ESM:

  1. Stop the "ng serve" process.

  2. Add to package.json: "type": "module"

  3. "ng serve" will no longer work because 'tailwind.config' is a '.js' file. Change its to extension to '.cjs' and run "ng serve" again.

  4. The tailwind classes no longer work because the '@import' lines don't work anymore. To make them work, I had to change them to:

    @import 'tailwindcss/dist/base.min.css';
@import 'tailwindcss/dist/components.min.css';
@import 'tailwindcss/dist/utilities.min.css';

  5. Tailwind works but tailwindcss-rtl doesn't work now. The "ms-4" directive is not a recognized class anymore.

20lives commented 2 years ago

Sorry for the late answer, but this doesn't seem to be related to tailwindcss-rtl. I have just tried successfully adding it to angular12 without any issue.

tailwind require all plugins to be commonjs.