Docker + Rails 6 Series + TailwindCSS Version 3 Does Not Reflect TailwindCSS Style

I am creating an application with Docker+Rails6 Series+TailwindCSS version 3, but it doesn't reflect the style of TailwindCSS, so I would like to consult with you.

In index.html.erb, I want to reflect my style immediately when I add a new Tailwind class.

For example, if the current index.html.erb is the source code below,

#index.html.erb

<h1class="text-3xl font-bold underline text-orange-700">
  Hello world!
</h1>

<p class="text-orange-200">The quick brown fox...</p>
<p class="text-purple-600">i have a dream</p>

localhost: When you open 3000, text-purple-600 is not reflected in "i have a dream" as shown below, even if you reload it, it is not reflected.

However, for some reason, the contents of the tailwind.config.js file are listed below.

#tailwind.config.js

module.exports={
  content: ["./app/**/*.{html,js,erb,rb}",
  theme: {
    extend: {},
  },
  plugins: [ ],
};

in the following conditions:

#tailwind.config.js

module.exports={
  content: ["./app/**/**/*.{html, js, erb, rb}", 
  theme: {
    extend: {},
  },
  plugins: [ ],
};

The style will be reflected as shown in the image below.

Also, in this state, the new color green

at the bottom of index.html.erb

#index.html.erb

<h1class="text-3xl font-bold underline text-orange-700">
  Hello world!
</h1>

<p class="text-orange-200">The quick brown fox...</p>
<p class="text-purple-600">i have a dream</p>
<p class="text-green-600">color green</p>

Style is not reflected as below.

If you reload the content state of the tailwind.config.js file by returning it to the first state as shown below,

#tailwind.config.js

module.exports={
  content: ["./app/**/*.{html,js,erb,rb}",
  theme: {
    extend: {},
  },
  plugins: [ ],
};

The style is reflected.

Why is it that the style is not reflected unless I modify or restore the content state of the tailwind.config.js file every time?

Other related files are as follows:

#application.html.erb

<!DOCTYPE html>
<html>

<head>
  <title>Myapp</title>
  <%=csrf_meta_tags%>
  <%=csp_meta_tag%>

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

<body>
  <%=yield%>
</body>

</html>
app/javascript/stylesheets/application.css

#app/javascript/stylesheets/application.css

@tailwind base;
@tailwind components;
@tailwind utilities;

#app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encountered to place your actual application logic in
// arelevant structure with app/javascript and only use these pack files to reference
// That code so it'll be compiled.

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
import "../stylesheets/application.css";

// Uncomment to copy all static images under../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g<%=image_pack_tag'rails.png'%>)
// or the `imagePath`JavaScript helper below.
//
// constimages=require.context('../images', true)
// const imagePath=(name)=>images(name, true)

#postcss.config.js

module.exports={
  plugins: [
    require("postcss-import"),
    require("postcss-flexbugs-fixes"),
    require("tailwindcss")("./app/javascript/style sheets/tailwind.config.js"),
    require("autoprefixer"),
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage —3,
    }),
  ],
};

#package.json

{
  "name": "myapp",
  "private"—true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "^5.4.3",
    "autoprefixer": "^9",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^1.6.1",
    "webpack-dev-server": "~3"
  }
}

#docker-compose.yml

version: "3"
services:
  webpack:
    build:.
    volumes:
      - .:/myapp
      - gem_data: /usr/local/bundle
    environment:
      NODE_ENV:development
      RAILS_ENV:development
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
    command: bash-c "bin/webpack-dev-server"
    ports:
      - '3035:3035'
  db:
    image:mysql:8.0
    volumes:
      - ./tmp/db:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD:password
    ports:
        - "4306:3306"
  web:
    build:.
    command:bash-c "rm-ftmp/pids/server.pid & bundle exec rails s-p 3000-b '0.0.0'"
    stdin_open —true
    tty —true
    volumes:
      - .:/myapp
      - gem_data: /usr/local/bundle
    ports:
      - "3000:3000"
    depend_on:
      - db
    environment:
      WEBPACKER_DEV_SERVER_HOST: webpack
volumes:
  mysql_data:
  gem_data:

#app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file with this directory, lib/assets/style sheets, or any plugin's
 * vendor/assets/stylesheets directory can be referred to here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the bottom of the
 * compiled files so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generically better to create a new file per style scope.
 *
 *= require_tree.
 *= require_self
 */

#webpacker.yml

# Note: You must restart bin / webpack-dev-server for changes to take effect

default —&default
  source_path —app/javascript
  source_entry_path —packs
  public_root_path —public
  public_output_path —packs
  cache_path —tmp/cache/webpacker
  check_yarn_integrity —false
  webpack_compile_output —true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: [ ]

  # Reload manifest.json on all requests so we reload latest completed packs
  cache_manifest:false

  # Extract and permit access file
  extract_css —False

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<:* default
  compile —true

  # Verify that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity —true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https:false
    host —localhost
    port —3035
    public:localhost:3035
    hmr —false
    # Inline should be set to true if using HMR
    inline —true
    overlay —true
    compress —true
    disable_host_check —true
    use_local_ip —false
    quiet —false
    pretty —false
    headers:
      "Access-Control-Allow-Origin": "*"
    watch_options:
      ignored: "**/node_modules/**"

test:
  <<:* default
  compile —true

  # Compile test packs to a separate directory
  public_output_path —packs-test

production:
  <<:* default

  # Production dependencies on precompilation of packs prior to booting for performance.
  compile —true

  # Extract and permit access file
  extract_css —true

  # Cache manifest.json for performance
  cache_manifest —true

ruby-on-rails docker-compose tailwindcss

2022-09-30 19:48

1 Answers

Do you use a gem called tailwindcss-rails?
If you're using it, starting with rails all the time with ./bin/dev might work.

2022-09-30 19:48

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656