Unable to add ant design stylesheets with tailwind in Rails 7

user_6772055 0
Viewed 503

I created a Rails 7 app using rails new demo -j esbuild --css tailwind. I am using antd package for the components and want to use the ant design stylesheet along with the tailwind stylesheet.

Tailwind has a way to add external stylesheets to its default styles. I used that and set application.tailwind.css file to this:

@import "~antd/dist/antd.css";

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

Now when I run ./bin/dev, the antd styles are neither applied nor those style classes are present in the generated app/assets/builds/application.css file.

It looks like tailwind overwrites the ant design styles.

If I keep application.tailwind.css and add

import 'antd/dist/antd.css';

to my index.js root file, only then are the antd styles being applied and are present in the generated app/assets/builds/application.css. But then the tailwindcss classes are removed.

How can I have both ant design styles and tailwind styles together in the generated app/assets/builds/application.css ?

esbuild ruby-on-rails-7 antd tailwind-css ruby-on-rails
1 Answers

This is how I ended up linking my own stylesheets in Rails 7 with esbuild and TailwindCSS.

currently if you run rails new demo --css tailwind Rails will use the tailwindcss-rails gem

However, if you pass the javascript option like you've done with esbuild while creating the new app it will use the cssbundling-rails gem instead. rails new demo -j esbuild --css tailwind.

The documentation for the cssbundling-rails gem says

If you want to use @import statements as part of your Tailwind application.js file, you need to configure Tailwind to use postcss and then postcss-import. But you should also consider simply referring to your other CSS files directly, instead of bundling them all into one big file. It's better for caching, and it's simpler to setup. You can refer to other CSS files by expanding the stylesheet_link_tag in application.html.erb like so: <%= stylesheet_link_tag "application", "other", "styles", "data-turbo-track": "reload" %>.

https://github.com/rails/cssbundling-rails#how-do-i-import-relative-css-files-with-tailwind

I created a new css file called users under app/assets/stylesheets/users.css

in application.html.erb I added the new users stylesheet after the application stylesheet in the stylesheet_link_tag.

<%= stylesheet_link_tag "application", "users", "data-turbo-track": "reload" %>

in app/assets/config/manifest.js add //= link users.css after images and builds.

user_85607090
Related