First time with Drupal. This should be easy. I need to add in some JS files to my sub theme globally. Cache is cleared every time when testing.
I am building off the default bootstrap theme.
Error: The website encountered an unexpected error. Please try again later.
SUBTHEME.libraries.yml
global-styling:
css:
theme:
css/style.css: {}
global-scripting:
js:
js/global.js: {}
SUBTHEME.info.yml
libraries:
- 'SUBTHEME/global-styling'
- 'SUBTHEME/global-scripting'
What am I missing here? Any help would be appreciated.
This worked for me to just add a js file
dont change
libraries:
- 'hytorc/global-styling'
global-styling:
css:
theme:
css/style.css: {}
js:
js/global.js: {}
Related
This is my first time installing and running tailwind CSS. I follow the instructions and did everything accordingly but then it started showing some warnings like below
Can you tell me why I am getting these warnings and anyway for me to fix them? As I am worried that my generated CSS will be missing styles So help is needed to fix it
Also, can I keep the tailwind CSS in watch mode? Please give me the command line or video or explain to me the way to fix it? Thank you in advance!
This warning occurred because you did not use any of the tailwind classes, causing tailwind to suspect that the project config was not implemented correctly.
https://tailwindcss.com/docs/installation
Make sure you don't have repeated properties in your Tailwind config file. After upgrading from v2 to v3, Accidently I had put two content properties. Other than that make sure you have done migration properly.
framework guide: https://tailwindcss.com/docs/installation/framework-guides
upgrade guide: https://tailwindcss.com/docs/upgrade-guide
It's look like you dont have the tailwind config file. Take a look in your root folder if you have. If not you can create one by this command: npx tailwindcss init
Then the tailwind cli will create the tailwind.config.js file. It looks like:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
https://tailwindcss.com/docs/installation
I have a problem.
I'm learning laravel 8 and tailwind CSS.
and as title vscode tailwind CSS Intellisense not working.
My tailwind CSS version is 2.2.15. tailwind.config.js like the photo.
enter image description here
output no error
enter image description here
so what can I do about this issue?
Tailwind CSS IntelliSense extension doesn't work until you have a configuration file in your workspace, as its description clearly states!
You'll be fine even if you're just using the CDN, but you have to create a tailwind.config.js file in your project's root directory, containing the defaults at least:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Also, and since you're working with Laravel, I guess you need to add Blade files to be recognized by the extension through this VSC setting (in settings.json):
"tailwindCSS.includeLanguages": {
"blade": "html",
},
One final note: The content paths are what going to be processed by Tailwind's JIT engine; understanding it is crucial!
Possible Solution
Disable a single VS Code Extension called:
"Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets"
Evidence
Tailwind CSS IntelliSense was not working in my Angular project. I had installed Tailwind CSS using their instructions:
Click here
MY VERSIONS
VS Code: 1.62.3
Tailwind CSS: 3.0.1
Angular: 13.0.3
I disabled the extension, mentioned as my "Possible Solution" above, and Tailwind CSS IntelliSense worked instantly.
Demo of Tailwinds CSS IntelliSense in my Angular project
i had same the issue while working on tailwind with laravel.
unInstalling and reinstalling tailwind intellisense extension solved my problem.
also , dont forget to add the following in the part of your blade file :
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
For me, it seems to be an issue with one of my extensions.
I needed to uninstall the "Emmet Live" extension and install the "Mithril Emmet" extension.
As some other answers have suggested, make sure you also put the following in your settings.json:
"tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
"strings": true
},
"css.validate": false
Using '' instead of "" might work.
I'm building a Next JS website and running Tailwind with JIT. This is my tailwind.config.js:
module.exports = {
mode: "jit",
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
extend: {},
plugins: [],
};
Problem is that every time I write new code I have to restart my server and run 'npm run dev' because it's not updating my CSS on http://localhost:3000/.
I also get a warning when I run my server:
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
Any ideas what might be causing this?
Thanks!
Since JIT mode generates your CSS on-demand by scanning your template files, it’s crucial that you configure the purge option in your tailwind.config.js file with all of your template paths, otherwise, your CSS will be empty. replace your purge entry with the following:
purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
Check out this https://tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files
You can also add TAILWIND_MODE=watch to your .env file.
I hope it's work because when i delete this, i am also facing same error.
And this warning is fine. It just a message
I had the same issue,
After removing all inline tailwind classes and put them in CSS files with #apply it gets to work well.
Maybe tailwind compiles CSS before Next server renders components.
fixed this, just edit the 'purge' property in your tailwind.config.js file a little by adding the correct path like this
'./public//*.html',
'./src//*.{js,jsx,ts,tsx,vue}',
and you're good to go.
in Nuxtjs, I added:
#import url('tailwindcss/dist/tailwind.min.css');
in to file: ~/assets/css/tailwind.css
Check your CSS, tailwind can die if you have #charset "UTF-8"; in CSS file
In my case tailwind wasn't the problem - it turns out one of my components had a memory leak due to a timer.
Test tailwind on a completely separate page/component and see if the hot-refresh works. If it works on one page and not another - you most likely have a memory leak.
Try removing the brackets from your purge links. That's what fixed it for me.
from this:
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]
to this:
purge: ["./pages/**/*.js,ts,jsx,tsx", "./components/**/*.js,ts,jsx,tsx"]
So I've tried to load the css on to my page, but with no luck. I used this approach https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme I am using a sub theme of bootstrap and have this in my
.libraries.yml:
global-styling:
css:
theme:
css/style.css: {}
and try to change css in style.css but doesn't work.
My .info.yml has:
libraries:
- 'SUBTHEME/global-styling'
You should rewrite the'SUBTHEME' word to your theme name. If yout theme name is bootstapsubtheme, you sould write
libraries:
- 'bootstrapsubtheme/global-styling'
Be careful, there is this "SUBTHEME" text in other files, that you sould rewrite to your themename.
And yes, like as they wrote above, you sould switch off the aggregate css and js files in the configuration-> development -> performance menu or clear all cache.
Figured it out. I had to go to admin > configuration > Development > Performance and uncheck "Aggregate CSS files".
I'd also recommend setting up theme debugging on your local environment: https://www.chapterthree.com/blog/drupal-8-theming-setting-up-theme-debugging (I'm not affiliated with them, just use it all the time).
I'm trying to make a Drupal 8 theme and no matter what I do, the stylesheet I have won't render. Here's my libraries.yml file:
global-styling:
version: VERSION
css:
theme:
css/layout.css: {}
and here's my info.yml file:
name: My Test Blog
type: theme
description: 'My test theme description'
package: Custom
core: 8.x
libraries:
- MyTestBlog/global-styling
stylesheets-remove:
- '#classy/css/layout.css'
- core/assets/vendor/normalize-css/normalize.css
regions:
header: Header
content: Content
stylesheets:
all:
- css/style.css
Any ideas?
If the path of your style sheet is correct then try to clear cache from admin panel and then check.
The problem is with your libraries.yml file (if the indentation is as shown above). Indentation is important in any yml format file and the above file will not be read correctly. Below is the correct indentation:
global-styling:
version: VERSION
css:
theme:
css/layout.css: {}
The info.yml file also contains reference to stylesheets property, which should be removed. The stylesheets property has been removed as of Drupal 8.0.0-beta11, only libraries are used now.
I solved the problem. The problem was that the name of my style directory was not the same as the name of my libraries and info files. What I mean is that before, I was doing something like naming my file "mytestblog.info.yml" and then trying to link to myblogsite/global-styling. Once I changed myblogsite/global-styling to mytestblog/global-styling, my stylesheet rendered.