I am trying to install tailwind v3 in a vue 3 project(vue-cli) using the tailwind doc guide, my postcss in the dev dependencies is >8 yet when I serve the app, I get an error tailwindcss requires postcss 8.
it's fine working with vue-add-tailwind plugin but that only installs older versions of tailwindcss and I need to install tailwind v3
Related
why dont we now install lib such as postcss and autoprfixers with tailwind css on CRA
Now If I go to Tailwind docs for installtion of tailwind into my react app which has been
created with CRA
https://tailwindcss.com/docs/guides/create-react-app
npm install -D tailwindcss
npx tailwindcss init
but if my memory serves right it used to be
npm install -D tailwindcss autoprefixer postcss
npx tailwindcss init
You are correct. According to this commit Tailwind has changed the installation guide.
They did this to discourage using CRA more since there are better tools out there to create a React app. For example Vite
From the Install Tailwind CSS with Create React App
Create React App does not support custom PostCSS configurations
When using Vite the Tailwind docs do say to install postcss and autoprefixer
npm create vite#latest my-project -- --template react
cd my-project
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
I added tailwindcss 3 to the vue-sfc-rollup project but it doesn't work
ERROR Failed to compile with 1 error
error in ./dev/index.css
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
Try:
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
Once the rest of your tools have added support for PostCSS 8, you can
move off of the compatibility build by re-installing Tailwind and its
peer-dependencies using the latest tag:
npm uninstall tailwindcss
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
For more information see here
So I am using rails 6.0.1 and trying to use Action text.
So I run the command rails action_text:install
and add the gem image_processing
and finally run rails db:migrate
When I launch my app I got this error message:
Sprockets::FileNotFound in Hotels#index
Showing /myapp/app/views/layouts/application.html.erb where line #8 raised:
couldn't find file 'trix/dist/trix' with type 'text/css'
Checked in these paths:
/myapp/app/assets/config
/myapp/app/assets/images
/myapp/app/assets/javascripts
/myapp/app/assets/stylesheets
/usr/local/bundle/gems/cloudinary-1.13.1/vendor/assets/html
/usr/local/bundle/gems/cloudinary-1.13.1/vendor/assets/javascripts
/usr/local/bundle/gems/activeadmin-2.5.0/app/assets/javascripts
/usr/local/bundle/gems/activeadmin-2.5.0/app/assets/stylesheets
/usr/local/bundle/gems/activeadmin-2.5.0/vendor/assets/javascripts
/usr/local/bundle/gems/jquery-rails-4.3.5/vendor/assets/javascripts
/usr/local/bundle/gems/formtastic-3.1.5/app/assets/stylesheets
/usr/local/bundle/gems/actioncable-6.0.1/app/assets/javascripts
/usr/local/bundle/gems/activestorage-6.0.1/app/assets/javascripts
/usr/local/bundle/gems/actionview-6.0.1/lib/assets/compiled
/usr/local/bundle/gems/turbolinks-source-5.2.0/lib/assets/javascripts
/myapp/node_modules
under assets/config/stylesheets/actiontext.scss I have:
//= require trix/dist/trix
and config/initiliazers/assets.rb:
Rails.application.config.assets.paths << Rails.root.join('node_modules')
Any idea how I could solve this?
I actually find the solution.
I had to run
yarn install --check-files
then reinstall action_text:
rails action_text:install
and then it fixed the issue.
The issue arises while setting up your Rails 6 app for the first time on your PC. You need to install the JS dependencies. Run these lines of code
bundle install
yarn install --check-files
rails action_text:install
I was getting this same error in my CI pipeline in Github Actions, with a Rails 7 app. The above solutions did not help. It turned out I needed to add yarn builds to my action:
# .github/workflows/verify.yml
- name: Compile assets
run: |
yarn build
yarn build:css
I install laravel boilerplate and when start project , he don't load font-awesome, why ?
Run npm install and then npm run dev
And try to clear your laravel cache and/or browser cache.
I am working with sass and compass and trying to use the new sourcemap feature as Chrome 27 requires the new method of sourcemap to show the actual sass files and line numbers in the chrome console panel.
I am able to run the following sass command sass --sourcemap --watch style.scss:style.css
however if I append the --compass argument like the following sass --compass --sourcemap --watch style.scss:style.css
I get the following error in the windows cmd panel: "ERROR: Cannot load compass".
I have tried following some of methods that apparently worked for some people on the github issue page https://github.com/chriseppstein/compass/issues/1108
The methods I have tried are using the sass 3.3.0.alpha.177 with compass 0.12.2 (this producers an error every time I try and execute the compass gem which is almost identical to this issue Why does "compass watch" say it cannot load sass/script/node (LoadError)?)
Currently my setup is the following:
sass 3.3.0.alpha.177
compass 0.13.alpha.4
Windows 7
Is there a way that I can use Sass with compass and at the same time generate the sourcemaps which are needed for css debugging?
I found that I had two versions of Sass installed (3.4.25 and 3.5.5). I was getting the error when using grunt which was using the latest version 3.5.5. I resolved the problem by uninstalling 3.5.5.
gem uninstall sass
→
Select gem to uninstall:
1. sass-3.4.25
2. sass-3.5.5
3. All versions
Works with Sass 3.3.0.alpha.149 and compass 0.12.2 on windows 7
The versions mentioned by #lollerskates666 work, but I had to specifically remove sass version 3.3.4 which came down when I installed compass.
If anyone else if having this difficulty, I had to run the following rules to get it working:
gem install compass --version 0.12.2
This installs compass and also Sass 3.3.4 (Maptastic Maple). These two versions, combined with --sourcemap don't seem to play nicely, so you'll need to install an older version of Sass:
gem install sass --pre --version 3.3.0.alpha.149
Although you've now installed it, if you run:
sass --v
Ruby will still be using Sass version 3.3.4, so you'll need to uninstall this version:
gem uninstall sass
**Select number assigned to version 3.3.4**
Now, if you run:
sass --v
You should see:
Sass 3.3.0.alpha.149 (Bleeding Edge)
Sass should now work with the compass lib and also produce sourcemaps, which Chrome can read :)
I run this command to watch my scss files:
sass --watch --sourcemap --compass --style compressed scss:css
Hope this helps!!
** I'm running this on a Mac, but the same versions work fine :)
Had this problem as well. gem 'sass', '~> 3.2.19' was working on a previously created application. I resorted to using that instead of gem 'sass', '~> 3.4.16 which was automatically generated at creation time for a 3.2.22 app and which generated this problem.
So there does appear to be an issue with the version.