As some of my html comes from database, some of used CSS classes are not presented in HTML file in time of build npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css.
So how can I disable JIT to have all possible CSS in ./dist/tailwind.css?
just-in-time engine or JIT is enabled by default on V3 and we don't have a key value to put on our tailwind.config file to disable it (at least for now).
The way they propose is use safelisting classes
https://tailwindcss.com/docs/content-configuration#safelisting-classes
If you know which classes are, or at least the pattern you can declare those on the safelist.
safelist: [
'bg-red-500',
'text-3xl',
'lg:text-4xl',
]
If you want to have all possible CSS you can try this but it will generate a huge css file (20M aprox) but maybe you can adapt it to what you need .
safelist: [
{
pattern: /.*/,
variants: [
"first",
"last",
"odd",
"even",
"visited",
"checked",
"empty",
"read-only",
"group-hover",
"group-focus",
"focus-within",
"hover",
"focus",
"focus-visible",
"active",
"disabled",
],
},
],
Related
So I'm making an App with React 17, tailwind and craco and its works find in dev but when i build with craco, tailwind don't include classes as h-36, h-44, col-span-1...
That's my tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
There are some things that you should check:
Make sure that you put the tailwind classes in className attribute instead of class attribute
Do not use string concatenation to create class names. So, instead of writing <div class="text-{{ error ? 'red' : 'green' }}-600"></div>, write <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Make sure that all your files are included in the purge command. Since you only specify './src/**/*.{js,jsx,ts,tsx}', this meant that tailwind will only scan what class should not be purged on those files with those extensions. This means that if you use tailwind classes in html files, tailwind will not scan those files. Also the same case if you somehow have files outside of ./src.
For me, I had to ensure that I was including all of the file types in my purge array within tailwind.config.js. Hope this helps someone - mine was missing the .vue files.
My Laravel tailwind purge array now looks like:
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
I have an Symfony form with CKEditor (installed with composer ("friendsofsymfony/ckeditor-bundle": "^2.2")) and configure it with my custom toolbar.
It's fully worked but i'm trying to switch everything to WebpackEncore, it's actually works but I have an weird problem.
My fos-ckeditor.yml totally works before WebpackEncore
# Read the documentation: https://symfony.com/doc/current/bundles/FOSCKEditorBundle/index.html
twig:
form_themes:
- '#FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
input_sync: true
default_config: main_config
configs:
main_config:
toolbar: "article_toolbar"
toolbars:
configs:
article_toolbar: [ "#document", "#clipboard", "#editing", "#tools", "/", "#basicstyles", "#paragraph", "#links", "#insert", "/", "#styles", "#colors" ]
items:
document: [ 'Source', '-', 'Preview', '-' ]
clipboard: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ]
editing: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ]
tools: [ 'Maximize', 'ShowBlocks' ]
basicstyles: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ]
paragraph: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-' ]
links: [ 'Link', 'Unlink', 'Anchor' ]
insert: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar' ]
styles: [ 'Styles', 'Format', 'Font', 'FontSize' ]
colors: [ 'TextColor', 'BGColor' ]
#filebrowserUploadRoute: "my_route"
#extraPlugins: "wordcount"
Result without WebpackEncore
My new config with WebpackEncore are the same with add this lines
fos_ck_editor:
# ...
base_path: "build/ckeditor"
js_path: "build/ckeditor/ckeditor.js"
jquery_path: "build/ckeditor/adapters/jquery.js"
When I comment on these 3 previous config lines, the toolbar is displayed correctly but WebpackEncore are no longer used.
It seems that WebpackEncore builds the toolbar differently from ckeditor because output HTML doesn't have same structure...
Webpack.config.js
Encore
// ...
.copyFiles([
{from: './node_modules/ckeditor4/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
{from: './node_modules/ckeditor4/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
{from: './node_modules/ckeditor4/lang', to: 'ckeditor/lang/[path][name].[ext]'},
{from: './node_modules/ckeditor4/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
{from: './node_modules/ckeditor4/skins', to: 'ckeditor/skins/[path][name].[ext]'}
])
// ...
Result with WebpackEncore
I followed all instructions in Symfony's installation documentation and Symfony's customize toolbar's documentation
I don't understand where the difference come from... Thank you for your help
When you install ckeditor4, you install its standard version.
You can change the default behavior by modifying the file fos_ckeditor.yaml
For example, by default, you have the following conf (build/ckeditor/config.js) :
config.removeButtons = 'Underline,Subscript,Superscript';
If you want to use these buttons, you can add in the fos_ckeditor.yaml file the option removeButtons
fos_ck_editor:
configs:
nameOfYourConfig:
removeButtons: ~
You can also add plugins with extraPlugins:
fos_ck_editor:
configs:
nameOfYourConfig:
removeButtons: ~
extraPlugins: 'justify'
With the justify plugin, you will be able to use JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock in your toolbar (not possible by default).
You will find below the list of options
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
I think there is a conflict with the npm package & encore.
I had the same problem and I have found a dirty solution. It’s not a perfect solution but I have a complete toolbar with encore:
start removing the npm package
yarn remove ckeditor
or ckeditor4
Create your own ckeditor: CK editor builder
After this copy paste your build to
assets/ckeditor/build
in your webpack.js.config remove other ckeditors imports line and only use:
{from: './assets/ckeditor/build', to: 'ckeditor/[path][name].[ext]'},
and in your fos_ckeditor :
fos_ck_editor:
base_path: "build/ckeditor"
js_path: "build/ckeditor/ckeditor.js"
For me it worked.
I encountered the same issue today and this happens because NPM installs the standard-all edition of ckeditor by default.
But FOSCKEditor download the full edition when using the command line.
So if you want to manage ckeditor with Webpack Encore, you also need to install the full edition using NPM:
npm install ckeditor/ckeditor4-releases#full/stable
See: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_package_managers.html#usage
I am trying to generate a static website out of my (minimal) code with Nuxt. In that code, I integrate in particular the tailwindcss toolkit as well as vue2-leaflet. Upon
nuxt generate
I get two css files, one for the tailwindcss css and the other for the leaflet css. While the former file is fine and contains everything I need, the latter is pretty sparse:
.leaflet-tile-pane{z-index:200}#-webkit-keyframes leaflet-gestures-fadein{to{opacity:1}}#keyframes leaflet-gestures-fadein{0%{opacity:0}to{opacity:1}}
Of course, that makes my map render in a pretty strange way, because most of the css is missing. Here's my current nuxt.config.js:
module.exports = {
mode: 'universal',
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
],
plugins: [
{ src: '~plugins/leaflet.js', mode: 'client' }
],
buildModules: [
'#nuxtjs/tailwindcss'
],
modules: ['#nuxtjs/apollo', 'nuxt-purgecss', ['nuxt-i18n', i18n]],
[...]
build: {
extractCSS: true,
}
}
Getting rid of the extractCSS ends up incorporating all the relevant css into the index.html. It works, but then I get the following error:
ERROR Webpack mode only works with build.extractCSS set to *true*. Either extract your CSS or use 'postcss' mode
I'm not sure I understand how that whole css extraction works. Could someone enlighten me? Why is it not working with extractCSS: true? How can I make it work? Why is it working in SPA mode but not in static mode?
You are using nuxt-purgecss which is using purgecss to strip unused CSS.
purgecss do scan HTML (or vue) files for CSS classes in use and then strip unused classes from final CSS bundle.
You can take a look at default purgecss configuration used by nuxt-purgecss here. The paths lists the paths purgecss will scan for CSS usage.
Because you are not using most of the leaflet css directly (in your components), its is necessary to configure purgecss to don't remove leaflet's css.
You can do that by whitelisting (btw not sure if "comment" method will work in Vue\Nuxt)
You can read more here and here
Not tested!!
// nuxt.config.js
{
purgeCSS: {
whitelistPatterns: [/leaflet/, /marker/]
}
}
Regarding the error message
Error message is from nuxt-purgecss module - it is clearly documented here
I don't have deep knowledge of Nuxt build process. So I just assume from the docs that extractCSS: true will use extract-css-chunks-webpack-plugin to extract all CSS to separate CSS file, while (default) extractCSS: false will use PostCSS to extract all CSS and put it directly into the <style> tag of rendered page.
All of that doesn't matter IMHO because the root problem is the use of purgecss and the solution is to configure it correctly to whitelist leaflet CSS classes....
I can't find how to make vendor scripts load before my own scripts. In manifest.json I tried:
"dependencies": {
"main.js": {
"files": [
"scripts/vendor_script.js",
"scripts/custom_script.js"
],
"main": true
},
Doesn't work: vendor script is called after my custom script. Also tried:
"dependencies": {
"plugins.js": {
"files": [
"scripts/vendor/owl.carousel.min.js"
]
},
"main.js": {
"files": [
"scripts/main.js"
],
"main": true
},
Same. Any suggestion?
[EDIT] my current manifest.json file, where I followed the advice from https://discourse.roots.io/t/custom-javascript-in-manifest-json-and-building-out-into-a-single-file/3316:
{
"dependencies": {
"main.js": {
"vendor": [
"scripts/vendor/owl.carousel.min.js"
],
"files": [
"scripts/main.js"
],
"main": true
},
"main.css": {
"files": [
"styles/main.scss",
"styles/vendor/font-awesome.min.css",
"styles/vendor/owl.carousel.min.css"
],
"main": true
},
"customizer.js": {
"files": [
"scripts/customizer.js"
]
},
"jquery.js": {
"bower": ["jquery"]
}
},
"config": {
"devUrl": "http://127.0.0.1/pot/"
}
}
[EDIT #2]
$ node
> require('asset-builder')('./assets/manifest.json').globs.js
require('asset-builder')('./assets/manifest.json').globs.js
[ { type: 'js',
name: 'main.js',
globs:
[ 'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\transition.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\alert.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\button.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\carousel.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\collapse.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\dropdown.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\modal.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\tooltip.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\popover.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\scrollspy.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\tab.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\affix.js',
'scripts/vendor/owl.carousel.min.js',
'assets/scripts/main.js' ] },
{ type: 'js',
name: 'customizer.js',
globs: [ 'assets/scripts/customizer.js' ] },
{ type: 'js',
name: 'jquery.js',
globs: [ 'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\jquery\\dist\\jquery.js' ] } ]
The script I'm trying to use is Owl Carousel. If I add the following in head.php it works fine:
<script src="<?php bloginfo("template_url"); ?>/assets/scripts/vendor/owl.carousel.min.js" type="text/javascript" charset="utf-8"></script>
If, instead, I set my manifest.json as shown previously I get a ".owlCarousel is not a function" in Firebug and my slider doesn't work.
Note: I didn't use Bowel, it's not mandatory in regular Sage workflow right? I just copied owl.carousel.min.js into assets/scripts/vendor/.
On a fresh Sage 8 installation I was able to quickly install OwlCarousel using Bower, exactly as described in the Sage documentation without any issue; its script and styles were both correctly included before project scripts and styles.
Font Awesome requires a Bower override because its default Bower main property instructs Bower to use a LESS and a SCSS file; once I set it to just use SCSS it worked fine. Sage 8 ships with a working set of Bower overrides which you should use as an example. See here.
Something else is going wrong with your scripts or your asset builder setup if you're unable to manually add scripts in the correct order. I suspect your asset paths may be incorrect. The best way to troubleshoot and ensure your manifest points to the correct asset paths is to start an interactive node session in a new terminal window.
First run (in your theme dir):
node
Then run (also in your theme dir):
require('asset-builder')('./assets/manifest.json').globs.js
or (still in your theme dir):
require('asset-builder')('./assets/manifest.json').globs.css
The output will display both the assets' paths and the order they're being included.
If you modify manifest.json while running the gulp watch task it may be necessary to halt the task, run a default gulp build, and then restart your gulp watch task.
If you still have difficulty after viewing the asset-builder output using the steps above then please post (either here or on the Roots forum) the output here along with the installation steps you took when installing the vendor scripts and custom scripts you're attempting to use so that someone can attempt to recreate your environment.
I have installed Zen Coding for Sublime Text 2. It works while expanding abbreviations outside of the tags, but it does not inside those script tags (which makes sense since js is expected there). However, it would be useful while editing Handlebars templates.
Does anyone know, how to configure/modify Zen Coding ST2 plugin to achieve this?
Thanks
The command it's now called expand_abbreviation_by_tab (I'm using Sublime Text 3).
In order to use Emmet inside the embedded js (the x-handlebars script scope) just paste this command inside your keymap file Key Bindings — User:
{
"keys": [
"tab"
],
"command": "expand_abbreviation_by_tab",
"context": [
{
"operand": "source.js.embedded.html",
"operator": "equal",
"match_all": true,
"key": "selector"
}
]
}
Add whichever scope you need Emmet to work as a value of the operand key.
Best of all you don't need to restart Sublime. It start working right away!
In ./ZenCoding/Default.sublime-keymap there is a set of context scope selectors that define what actions are active when editing different portions of the file. These are the same scope selectors that TextMate uses.
The default scope for the expand_zen_abbreviation_on_tab command (at the time of writing this it's the last entry in the file) does not include a selector for <script> tags. We need to add it.
In order to find the correct scope, place your cursor somewhere in a ST2 document and hit ctrl+shift+p. The status bar will show you the selectors for the region you're in. In the case of a script tag saved in a .html file, it returns:
text.html.basic source.js.embedded.html
Given this information, we add the source.js.embedded.html entry to the operand property of the expand_zen_abbreviation_on_tab command and voilà, zen coding will work inside script tags.
Here is my expand_zen_abbreviation_on_tab with the context added...
{"command": "expand_zen_abbreviation_on_tab",
"context": [{"key": "selector",
"match_all": true,
"operand": "source.css - source.css.embedded, text.xml, text.html -source -meta.tag, meta.scope.between-tag-pair.html -source, source.js.embedded.html",
"operator": "equal"},
{"key": "selection_empty",
"match_all": true,
"operand": true,
"operator": "equal"},
{"key": "is_zen", "match_all": true}],
"keys": ["tab"]}]
at line 31 of “zencoding/zen_settings.py” change 'filters': 'html,css', to 'filters': 'html,css,hbs' can also add other file types here as well such as erb if you are using rails.