In PhpStorm 2019.3.4 I work with tailwindcss 2 In laravel 8 app and I installed tailwindcss plugins
I found : Tailwind Formatter, Tailwind CSS Smart Completions, Tailwind Intellisense
But I do not see any tailwindcss support in my PhpStorm in many cases when I need it. In blade.php file having line like
...
<div class="my-2 w-100 admin_content_text_color">
</div>
...
adding “ px” in end of class definitions I want to see autocomplete hint on existing tailwind
classes
Simialr in my custom resources/css/app.css
.editor_form_inactive_tab {
#apply text-gray-400y;
}
entering “text-red-” I do not see any autocomplete hint I expect.
In my webpack.mix.js I have :
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);
Seems none of installed plagins I wrote above nned any additive options in setting ?
Thanks!
Official Tailwind support has been introduced in PhpStorm 2020.3 (see https://blog.jetbrains.com/webstorm/2020/11/webstorm-2020-3/), you can't expect it to work in v.2020.2. Please consider upgrading
Related
I can't get the enabled modifier to work with Tailwind CSS v3.
From the Tailwind docs, it is described to work like this.
On the Tailwind Play site, it works as expected.
I can not get the same to work in my own application. If I add this to my code (the bg-black-100 is a custom color defined in the theme file, also it is React):
<button className="bg-black-100 p-2 enabled:hover:bg-white">Hello</button>
Nothing happens on hover. If I remove the enabled modifier, hover works. The enabled modifier is enabled by default.
Does anyone know what might be wrong?
Tailwind config:
const theme = require('./src/components/lib/tailwind.theme');
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: theme,
plugins: [
require('#tailwindcss/forms'),
],
}
The theme file doesn't look very relevant, as I've done nothing there that has to do with modifiers.
Tailwind version: 3.0.24.
EDIT: It only partially solved the issue. I still have it elsewhere.
I updated Tailwind to version 3.1.7, and it seems to have solved the issue. If anyone else has a similar problem with enabled, try to update Tailwind.
I am using Create-React-App and I want to add background image for my header section and I am doing this in that way:
background-image: url('~/Screenshot_11.png');
After this I'm getting this error:
./src/styles/main.scss
(./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/styles/main.scss)
Module not found: You attempted to import
../../../../../../../Screenshot_11.png which falls outside of the
project src/ directory. Relative imports outside of src/ are not
supported.
I've set up homepage in package.json
"homepage": "http://localhost:3000",
In my older projects that works but today I cannot import this correctly.
They have changed that but I don't know why. Working path:
background-image: url('/Screenshot_11.png');
EDIT 2021
For people who think that it doesn't work:
https://codesandbox.io/s/agitated-turing-gsnr3
you can import that image as
import Background from './Screenshot_11.png'
and use
background-image: `url(${Background})`
This still does not work for me with images in the public folder.
UPDATED 19 March 2021
Regarding using of <ROOT/public/images> in .css files.
It appears to be a breaking change (will be considered as a bug?) in create-react-app (react-scripts) package v4.x.
And more precisely in package 'css-loader' v4.x.
3.x branch works OK with that.
Here is the corresponding issue on the github repo:
https://github.com/facebook/create-react-app/issues/9870
(and there are few more actually).
No fixes (yet). (will be?..)
But a few workarounds mentioned there.
Which one to use... it depends on your project, I suppose.
Some of workarounds:
downgrade to react-scripts 3.4.x
don't use url in CSS files :) you still can use in .JSX (inline styles). Or put in .html. They are obviously not processed by css-loader.
reconfigure webpack to add url:false to css-loader options (either eject CRA or use this: https://github.com/gsoft-inc/craco or this: https://github.com/timarney/react-app-rewired
(you can find sample configurations at the github issue page)
use this new feature of css-loader https://github.com/webpack-contrib/css-loader/pull/1264
(released in 5.1.0, current last version is 5.1.3; to use that version you can add the following to the package.json: "resolutions": { "css-loader": "5.1.3" } (at root level) )
I'm using PHPStorm 2017.2 and today I faced with some trouble. Is there any way to use arrow functions within vue attributes inside template? Now, i'm getting "expression expected" error highlighted by PHPStorm, when trying to write something like
<template>
<button #click="() => {some code... }">Click me</button>
</template>
Arrow functions works fine inside script tag, but problem with template tag drives me mad.
Functions are not allowed in the template syntax so if the plugin allows it or not doesn't matter anyways + its not good practice --> create a method for it much cleaner and more readable.
Git hub issue for similar problem.
https://github.com/vuejs/vue-loader/issues/364
I'd say it's supported already in vuejs 2.0. I have tested it and it's also written in the docs:
<comp :foo="bar" #update:foo="val => bar = val"></comp>
Just PhpStorm is complaining... If you raise a bug I will upvote!
I'm using React for my components, and in order to package up the styles with my components, I'm requiring them in as per the documented webpack method:
require('./style.css');
But when I try to render on the server, node-jsx throws an error when it attempts to transform the css. Is there another way of transforming the jsx which won't break on css? I'd rather not break the styles out into their own pipeline as that would defeat the advantage of webpack packaging components up nicely.
This can be solved setting webpack's "target" configuration to "node".
This simple example app should explain it clearly.
https://github.com/webpack/react-webpack-server-side-example/blob/master/webpack.config.js
You could use require.extensions like this:
require.extensions['.css'] = function() {return null}
We need to export our Apiary Blueprint for task assignment purposes as a self containing "deliverable" like PDF or ZIP or similar. I'm aware of the feature request and the discussion below. Is it possible to "hack" something better than the poor html exporter? Maybe by injecting some css style into the page with chrome? Has somebody found a "good-enough" solution?
Ján Sáreník mentioned aglio, you can make it work locally by the following steps.
Save your API definition markdown (e.g. myfile.md)
Install aglio npm install aglio -g
Start aglio server aglio -i myfile.md -s
Open localhost:3000 and download the HTML file
Hack the HTML by commenting out the <div id="localFile" ...>...</div> warning
Hack the HTML by replacing http://localhost:3000/ with empty string everywhere
Aaand it's done.
You can use https://github.com/danielgtaylor/aglio to render API Blueprint into static HTML files which can be zipped (or maybe also PDF-exported, but I haven't tried).