Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Can you help me on how to install metronic tailwind theme on rails?


I'm having problems because there is no installation file. Can you help me?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi

Open Metronic Tailwind HTML folder

/metronic-v9.0.4/metronic-tailwind-html/webpack.config.js Copy the tailwind.config.js file from the Metronic HTML folder.

Add the following to your Rails file app/javascript/stylesheets/application.scss file:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
  1. You’ll need to copy the relevant CSS and assets from the Metronic Tailwind theme into your Rails project. From here: /metronic-v9.0.4/metronic-tailwind-html/dist/assets

Place the Metronic CSS files into app/javascript/stylesheets/ or include them in the application.scss file. Metronic provides a compiled Tailwind CSS file in dist/assets. Move any JavaScript or other assets (like images or fonts) into appropriate folders within app/javascript/ or app/assets/.

  1. Configure Layout Files Update your Rails views (app/views/layouts/application.html.erb) to include the correct HTML structure from Metronic’s theme. Copy the HTML layout and paste it inside your Rails layout files. Properly link the CSS and JS files by using Rails’ asset pipeline.

Hi,

Please note that there aren't any installation docs for Rails available at the moment.

In the meantime, are you able to create a new Rails project on your own? You can follow this guide to get started:


Thank you


Hi

At the moment, there are no installation docs for Rails yet. Here’s a general process you can use:

  1. Extract the contents of the theme files locally.

  2. First, you must set up Tailwind in your Rails app. Follow these steps to create Rails project.

Run the following command in your Rails application folder to install Tailwind:

rails new myapp
cd myapp
rails webpacker:install

Copy the tailwind.config.js file from the Metronic HTML folder.

Add the following to your app/javascript/stylesheets/application.scss file:

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

  1. You’ll need to copy the relevant CSS and assets from the Metronic Tailwind theme into your Rails project.

Place the Metronic CSS files into app/javascript/stylesheets/ or include them in the application.scss file. Metronic provides a compiled Tailwind CSS file in dist/assets. Move any JavaScript or other assets (like images or fonts) into appropriate folders within app/javascript/ or app/assets/.

  1. Configure Layout Files Update your Rails views (app/views/layouts/application.html.erb) to include the correct HTML structure from Metronic’s theme. Copy the HTML layout and paste it inside your Rails layout files. Properly link the CSS and JS files by using Rails’ asset pipeline.
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(