How to install TailwindCSS 1.0 with Rails 6 Discussion
Hey Chirs!
Great video, only question I have about using tailwind with rails 6 is the theme config.
in the docs it says to place:
module.exports = {
theme: {
container: {
center: true,
},
},
}
within tailwind.config.js however when i make this file it dosn't load and if i try to add it to the postcss coinfig it crashes and wont compile.. any solutions or suggestions?
ok so I am a complete idiot..
all i had to do was run the following in my terminal
./node_modules/.bin/tailwind init path/to/app/tailwind.config.js
https://tailwindcss.com/docs/installation#3-create-your-tailwind-config-file-optional
npx tailwind init
or
yarn tailwind init
I don't know if things have changed since this video was posted, but when editing postcss.config.js, you will want to have require('postcss-import') come before require('tailwindcss').
If you don't, tailwind will process the empty-ish file doing nothing (no @tailwind directives), and then the postcss import will pull in the tailwind imports.
Doing the import first means the @tailwind directives will be present when the tailwind processor runs.
Anyone know if this is correct? Chris just went with pasting the requires above the require('postcss-import') which seems to make sense.
require('postcss-import') should be at the top of postcss.config.js, it won't break @import 'file.css'; if using CSS instead of SCSS.
This may have been true at one time, but having them in Chris' order is fine:
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-import'),
...
Would it be sensible to use tailwindcss together with bootstrap, or is it really meant to replace bootstrap?
This is definitely an alternative to something like Bootstrap. They're both full CSS frameworks albeit with different philosophies.
I am having a problem with tailwind and it seems it also occur here in the tutorial, whn I added tailwing because it is compiled with javascript, my styling does not apply on load until my javascript are loaded. is there any fix for this?
To get this working on an existing app running Rails 6, I had to:
1) Create a tailwind.config.js file using yarn tailwindcss init and move it from the root to app/javascript/stylesheets
The official TailwindCSS documentation says this file is optional, but I couldn't get any default browser styles to change until I did this.
If you want the full TailwindCSS default theme, use yarn tailwindcss init --full. You can strip unused extras out on your production server with Purge-CSS later if you want.
2) Reinstall Webpacker. When I ran bin/webpack I got this error: "bin/webpack: No such file or directory".
bundle exec rake webpacker:install fixed it.
Config: Ruby 2.6.5 + Rails 6.0.3 + TailwindCSS 1.4.6
Actually, after further testing I'm certain reinstalling Webpacker fixed it. (The config file had nothing to do with getting TailwindCSS working.)
Does anybody knows how to fix this error in Rails 6.0.3 and TailwindCSS 2.0?
ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (/Users/alex/Workspace/virtualfood/node_modules/postcss/lib/processor.js:153:15)
at new Processor (/Users/alex/Workspace/virtualfood/node_modules/postcss/lib/processor.js:56:25)
at postcss (/Users/alex/Workspace/virtualfood/node_modules/postcss/lib/postcss.js:55:10)
at /Users/alex/Workspace/virtualfood/node_modules/postcss-loader/src/index.js:140:12
@ ./app/javascript/stylesheets/application.scss 2:26-228
@ ./app/javascript/packs/application.js
Yes, I created this template for the solution https://railsbytes.com/templates/XbBsG6
I hope it help you too!