CODEWITHSUNDEEP
webpackertailwind-cssruby-on-rails-6
Steven Aguilar
Steven Aguilar

Reputation: 3047

Unable to install Tailwindcss into Rails 6

I'm currently trying to install Tailwind into a rails 6 application via Webpack but after following the docs the styles are not being applied to a view template as shown in the image. I have Tailwind v1.0.3. I also tried to upgrade Webpack to v4 so not sure if it's something due to that.

enter image description here

I have the following files:

javascript/css/application.css

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

My packs/application.js looks as follow:

require("stylesheets/application.scss")

And my /postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

I can also see from the packaje.json file that Tailwind was in fact installed.

{
  "name": "artsy_space",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.5",
    "tailwindcss": "^1.0.3",
    "vue": "^2.5.17",
    "vue-loader": "14.2.2",
    "vue-template-compiler": "^2.5.17"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}

and the application.html.erb

        <!DOCTYPE html>
    <html>
      <head>
        <title>ArtsySpace</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>

        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
      </head>

      <body>
          <p class="alert alert-error">
            <%= flash[:alert] %>
          </p>

          <p class="alert alert-info">
            <%= flash[:notice] %>
          </p>
        <%= yield %>
      </body>
    </html>

H

ere is a link to a PR in the repo.

Any idea what might it be?

Upvotes: 3

Views: 1619

Answers (3)

Antonija Šimić
Antonija Šimić

Reputation: 478

The only thing that worked for me is importing manually tailwind file into the application.js file.

require("./../../assets/stylesheets/application.tailwind.css")

and then running rails assets:clobber

Upvotes: 0

David Lee
David Lee

Reputation: 601

Try adding this line to your javascript/packs/application.js file

require("stylesheets/application.scss")

Everything else looks correct.

I'm also assuming you ran yarn add tailwindcss in your console.

If adding that file doesn't work, try running bin/webpack in your console.

If there are any error messages, they will help you debug the issue.

Upvotes: 0

tala
tala

Reputation: 323

It appears you might be requiring the wrong directory. Try changing:

require("stylesheets/application.scss")

to:

require("css/application.css")

Also, note that you're requiring a .scss file but it looks like the actual file is .css?

Upvotes: 1

Related Questions