I am just trying out the new Tailwind CSS 'jit' mode and realized when switched Webstorm fails to autocomplete the Tailwind CSS classes.
May there be a fix to this?
my tailwind.config.js;
module.exports = {
mode: 'jit',
purge: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
presets: [],
darkMode: false, // or 'media' or 'class'
theme: {...}
...
My postcss config (inside nuxt.config.js);
postcss: {
plugins: {
'tailwindcss': {},
'#tailwindcss/jit': {},
autoprefixer: {},
}
}
It's a known issue: with "jit" mode, code completion list is very limited, most of applicable CSS classes are not suggested. This will be fixed in the scope of WEB-50318, please follow it for updates.
Note also that, when using latest tailwindcss versions, the completion includes unrelated CSS classes from some *.test.css files. This will be fixed with the next tailwindcss package update, see https://github.com/tailwindlabs/tailwindcss/issues/4393. Workaround: delete node_modules/tailwindcss/jit/tests/ folder, it's not needed.
Related
I have been trying this for a while now, without success.
I have an expo app and I am using cypress to test some use cases using the web version of the app (generated by expo).
However, I would like to generate some code coverage as well. I have read the official documentation for it, that recommends to babel-plugin-istanbul do to so, but it does not seem to work with expo.
I am not sure why this would not work.
Edit
I removed the files previously pointed here as they were not important.
Thanks for a wonderful documentation provided by a hero without a cape, I figured that my settings were wrong.
All I needed to do was:
install babel-plugin-istanbul
Update babel.config.js
module.exports = {
presets: ['babel-preset-expo'],
plugins: [
'istanbul',
[
'module-resolver',
{
root: ['.'],
extensions: [
'.js',
],
alias: {
'#': './',
},
},
],
],
};
update cypress/support/index.js
import '#cypress/code-coverage/support';
update cypress/plugins/index.js
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config);
// add other tasks to be registered here
// IMPORTANT to return the config object
// with the any changed environment variables
return config;
};
and voilà!
I use 2 entry files, startpage.js and subpage.js, and assign them successfully to their HTML files via the HTMLWebpackPlugins chunks parameter.
But since that solution requires to include the CSS files in both the startpage.js and subpage.js, which makes for "double the trouble" (at least during the build process), I decided to create another file, app_head, and put the import 'main.css' statement there. (And I also have a vendor file that should be placed in the header of the HTML, which should happen by adding _head according to the documentation: https://github.com/architgarg/html-webpack-injector - but that does not work either...)
This is the current webpack config (excerpt):
module.exports = {
entry: {
app_head: './src/css/main.css',
vendor_head: './src/scripts/vendor/_all_vendor.js',
startpage: './src/scripts/startpage.js',
subpage: './src/scripts/subpage.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, '../public'),
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/templates/index.ejs',
chunks: ['app_head', 'vendor_head', 'startpage'],
chunksConfig: {
defer: ['startpage']
},
excludeChunks: ['subpage'],
bodyCss: 'is-startpage',
}),
new HtmlWebpackPlugin({
filename: 'publication.html',
template: './src/templates/publication.ejs',
chunks: ['subpage'],
chunksConfig: {
defer: ['subpage']
},
excludeChunks: ['startpage'],
bodyCss: 'is-subpage',
}),
[...]
The app_head.css is placed properly in the head section of the HTML, but it also generates a useless app_head.js, which only contains webpack code. Unfortunately, I do not know of any way how to exclude that file without also excluding the CSS.
Is there a better way to separate the CSS generation process without producing overhead or garbage?
The problem is you did not initialized the html-webpack-injector plugin.
// import above
const HtmlWebpackInjector = require('html-webpack-injector');
plugins: [
new HtmlWebpackPlugin(...),
new HtmlWebpackPlugin(...),
new HtmlWebpackInjector() // add this in plugins array
When I build (netflify build) my Gridsome personal website, tailwind CSS classes doesn't work and the website look's like without CSS.
I have already tried to build without git, reinstall tailwind...
I show my gridsome config if that's the problem:
const tailwind = require('tailwindcss');
const purgecss = require('#fullhuman/postcss-purgecss');
const postcssPlugins = [
tailwind(),
]
if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss());
module.exports = {
siteName: 'Zolder | Works',
plugins: [],
css: {
loaderOptions: {
postcss: {
plugins: postcssPlugins,
},
},
},
}
I had this issue as well. I used the Tailwind Plugin for Gridsome and it worked locally but when deploying to Netlify, the Tailwind css wasn't getting added.
Referencing this starter file: https://github.com/drehimself/gridsome-portfolio-starter/blob/master/src/layouts/Default.vue
I added the main.css with all the Tailwind imports file to the end of the Default Layout template instead, and this worked for me.
You can add Tailwind to your Gridsome project with these steps:
edit gridsome.config.js
module.exports = {
siteName: "Zolder",
plugins: [],
chainWebpack: config => {
config.module
.rule("postcss-loader")
.test(/.css$/)
.use(["tailwindcss", "autoprefixer"])
.loader("postcss-loader");
}
};
create a global.css file in ./src/styles
#tailwind base;
#tailwind components;
#tailwind utilities;
import global.css in main.js
import './styles/global.css'
I'm trying to make my own theme for jstree by way of ember-cli-jstree. I thought I would start by using the proton theme. I copied the proton directory from this link into my public directory in my app and added the name of the theme to my jsconfig blob in my controller:
jsTreeConfig: {
themes: {
name: 'proton',
dots: false,
icons: false,
variant: 'large',
},
},
However, this causes the styles to break completely. I haven't found great documentation for creating a custom theme using the ember-cli-jstree addon so any pointers in the right direction there would be helpful.
You can't link directly to the public directory in ember because of the way that directory is treated in the build process. I deleted the public directory from my URL and it worked.
jsTreeConfig: {
themes: {
name: 'my-theme',
url: '../../my-theme/style.css',
},
},
I'm hopelessly trying to make the Dijit template inlining functionality of Dojo builds for my AMD project work with no luck yet ...
The particular issue isn't the inlining of the HTML templates themselves, but the fact that they are still requested with Ajax (XHR) after being successfully inlined.
Templates are inlined the following way :
"url:app/widgets/Example/templates/example.html": '<div>\n\tHello World!</div>'
The Dijit widget itself, after building, defines templates like this :
define("dojo/_base/declare,dijit/_Widget,dojo/text!./templates/example.html".split(","), function (f, g, d) {
return f("MyApp.Example", [g], {
templateString: d,
});
});
I tried to build with :
the shrinksafe / closure optimiser
relative / absolute paths
using the old cache() method
using the templatePath property
but even after having run a successful build (0 errrors and a few warnings) where the templates were inlined, Dojo / Dijit still makes Ajax requests to these resources.
Here is my build profile :
var profile = {
basePath: '../src/',
action: 'release',
cssOptimize: 'comments',
mini: true,
optimize: 'closure',
layerOptimize: 'closure',
stripConsole: 'all',
selectorEngine: 'acme',
internStrings: true,
internStringsSkipList: false,
packages: [
'dojo',
'dijit',
'dojox',
'app'
],
layers: {
'dojo/dojo': {
include: [
'app/run'
],
boot: true,
customBase: true
},
},
staticHasFeatures: {
'dojo-trace-api': 0,
'dojo-log-api': 0,
'dojo-publish-privates': 0,
'dojo-sync-loader': 0,
'dojo-xhr-factory': 0,
'dojo-test-sniff': 0
}
};
Due to this issue my application is completely unusable because there are so many files to download separately (browsers have a limit on the number of parallel connections).
Thank you very much in advance !
UPDATE :
The two lines loading dojo.js and the run.js in my index.html :
<script data-dojo-config='async: 1, tlmSiblingOfDojo: 0, isDebug: 1' src='/public/dojo/dojo.js'></script>
<script src='/public/app-desktop/run.js'></script>
Here is the new build-profile :
var profile = {
basePath: '../src/',
action: 'release',
cssOptimize: 'comments',
mini: true,
internStrings: true,
optimize: 'closure',
layerOptimize: 'closure',
stripConsole: 'all',
selectorEngine: 'acme',
packages : [
'dojo',
'dijit',
'app-desktop'
],
layers: {
'dojo/dojo': {
include: [
'dojo/request/xhr',
'dojo/i18n',
'dojo/domReady',
'app-desktop/main'
],
boot: true,
customBase: true
}
},
staticHasFeatures: {
'dojo-trace-api': 0,
'dojo-log-api': 0,
'dojo-publish-privates': 0,
'dojo-sync-loader': 0,
'dojo-xhr-factory': 0,
'dojo-test-sniff': 0
}
};
My new run.js file :
require({
async: 1,
isDebug: 1,
baseUrl: '/public',
packages: [
'dojo',
'dijit',
'dojox',
'saga',
'historyjs',
'wysihtml5',
'app-shared',
'jquery',
'jcrop',
'introjs',
'app-desktop'
],
deps: [
'app-desktop/main',
'dojo/domReady!'
],
callback: function (Main) {
debugger;
var main = new Main();
debugger;
main.init();
}
});
and my main.js file looks like this :
define([
'dojo/_base/declare',
'app-desktop/widgets/Application',
'app-desktop/config/Config',
'saga/utils/Prototyping',
'dojo/window',
'dojo/domReady!'
], function (declare, Application, ConfigClass, Prototyping, win) {
return declare([], {
init: function() {
// ... other stuff
application = new Application();
application.placeAt(document.body);
// ... some more stuff
}
});
});
In build-mode, I get the following error :
GET http://localhost:4000/app-desktop/run.js 404 (Not Found)
which is weird because it means that the build process made it so that dojo has an external dependency rather than an a already inlined dojoConfig variable in the builded file.
In normal-mode, files get requested, but the app is never created.
In both cases none of the two debuggers set in the run.js file were run which means that the callback method was never called for some reason.
Thank you for your help !
I've printed values of requireCacheUrl and require.cache to console in the method load() of dojo/text.js. At least in my case, keys of my templates in the cache differs from lookup keys on one leading slash.
For example, I have "dojo/text!./templates/Address.html" in my widget. It present with key url:/app/view/templates/Address.html in the cache but is searched like url:app/view/templates/Address.html, causing cache miss and xhr request.
With additional slash in dojo/text.js (line 183 for version 1.9.1) it seemingly works (line would looks like requireCacheUrl = "url:/" + url).
Not sure what kind of bugs this "fix" could introduce. So, it probably worth to report this issue to dojo folks.
UPD: Well, I see you've already reported this issue. Here is the link: https://bugs.dojotoolkit.org/ticket/17458.
UPD: Don't use hack described above. It was only attempt to narrow issue. Real issue in my project was with packages and baseUrl settings. Initially I created my project based on https://github.com/csnover/dojo-boilerplate. Then fixed it as in neonstalwart's sample.
This sounds like https://bugs.dojotoolkit.org/ticket/17141. If it is, you just need to update to Dojo 1.9.1.