I am using the Tailwind CLI installation and all the files work except the PHP files.
So I decided to try adding in my TailwindCSS configuration the .php extension and then tried to connect to the page with the Live Server but no the page was not using Tailwind.
Here is my tailwind.config.js:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,php}"],
theme: {
extend: {},
},
plugins: [],
}
Ok so i manage to make it work if your .php file is located on the root directory your tailwind config must look like this.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,php}"],
theme: {
extend: {},
},
plugins: [],
}
then on the portion where you have to link your output.css on your html head section you must include the ./
<link href="./dist/output.css" rel="stylesheet">
Or to validate open your dev tool network tab and check if output.css returns http response 200
Related
I'm using Express/Node with Pug as the view template. Attempting to use Tailwind for styling, but have been unable to get Tailwind to modify my CSS based on the classnames added in the Pug files. Has anyone run into this before?
Here is the Pug file where I'm attempting to modify how "Testing tailwind" will display. However, it loads with black plain text.
I was able to populate my style.css file with the tailwind boilerplate base, components, and utilities. If I style the class name in styles.css it works, so the file is linked correctly...
Most likely Tailwind was not render. In this article and this video show how to do it.
You must install tailwindcss postcss autoprefixer postcss-cli
npm install tailwindcss postcss autoprefixer postcss-cli
Create postcss.config.js
module.exports =
{
plugins:
{
tailwindcss: {},
autoprefixer: {},
},
}
and tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports =
{
content:
[
'./views/*.{pug, html}',
],
theme:
{
extend:
{
},
},
plugins:
[
],
}
And public/styles/tailwind.css css file within
#tailwind base;
#tailwind components;
#tailwind utilities;
To package.json add script
"tailwind:build": "postcss public/styles/tailwind.css -o public/styles/style.css",
And now you can build tailwind for your pug templates or some other html files. Just run npm run tailwind:build and open your host
But for don't running again and again this script you can watching for files with this script
"tailwind:watch": "postcss public/styles/tailwind.css -w -o public/styles/style.css"
Just run npm run tailwind:watch and your css file will be updating on change tailwind.css file
module.exports = {
content: ["./**/*.pug"],
theme: {
extend: {},
},
plugins: [],
};
try like this:
I recently encountered this problem. I was following this video and at the end, tailwind didn't seem to work at all.
After looking at document, I tried a new approach and it worked:
Instead of:
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
title Node.js with TailwindCSS, Express and Pug
// Injecting css file as the tutorial
link(href="./styles/style.css", rel="stylesheet")
body
h1 Hello world!
p My starter template
Try this:
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
title Node.js with TailwindCSS, Express and Pug
// Follow the document
style
include ../public/styles/styles.css
This worked out for me, I hope this helps some of you.
Happy coding!
I have installed vue cli on craft cms. The problem is that when I do npm run build as main index page the vue cli index.html page is displayed instead of the cms index page.
In the vue.conf.js file below I've tried to disable the index.html page but it doesn't work.
vue.config.js
module.exports = {
chainWebpack: config => {
config.plugins.delete('html');
config.plugins.delete('preload');
config.plugins.delete('prefetch');
}
};
Do you only want to delete the generated index.html?
Edit your vue.config.js accordingly.
configureWebpack: { plugins: [ new ManifestPlugin({ fileName: modern ? "manifest.json" : "manifest-legacy.json", publicPath: production ? "/dist/" : "/" }), new FileManagerPlugin({ onEnd: { // Delete unnecessary index.html file delete: ["./web/dist/index.html"] } }) ] }
I have a Nuxt project. Everything is OK when I generate a static page.
However, I need to send a POST request to the other server.
I tried to use both a proxy in nuxt.config.js and just direct query, but after deploy to the ngnix eventually, nothing works.
Please help.
UPDATE. Steps to reproduce.
Create Nuxt App including axios and proxy
Configure your proxy for other webservice:
proxy: {
'/api': {
target: 'http://example.com:9000',
pathRewrite: {
'^/api': '/',
},
},
changeOrigin: true,
},
call this service somewhere in the code:
const result = await this.$axios.post('/api/email/subscribe', {email: email})
run "yarn dev" and test the service. It works locally properly.
run 'nuxt generate' and deploy the static code hosting service, for example, hosting.com
run your page which calls the above-mentioned service.
As a result, instead of making POST call to the hosting.com/api/email/subscribe, it calls localhost:3000/api/email/subscribe.
Be sure to install the nuxt versions of axios and proxy in your project #nuxt/axios and #nuxtjs/proxy
after that in your nuxt.config.js add axios as module plus this options for axios and proxy:
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
//more modules if you need
],
/*
** Axios module configuration
*/
axios: {
proxy: true,
// See https://github.com/nuxt-community/axios-module#options
},
proxy: {
'/api/': {
target: process.env.AXIOS_SERVER, // I use .env files for the variables
pathRewrite: { '^/api/': '' }, //this should be your bug
},
},
now you can use axios in any part of the code like this
const result = await this.$axios.post('/api/email/subscribe', {email: email})
it will internally resolve to AXIOS_SERVER/email/subscribe without cause cors issues.
EXTRA: test enviroments in local using multiples .env files
you can configure .env for dev and .env.prod for production, after that in local you can use yarn build && yarn start for test your app with your production enviroment. You only need add this at the top of your nuxt.config.js file
const fs = require('fs')
const path = require('path')
if (process.env.NODE_ENV === 'production' && fs.existsSync('.env.prod')) {
require('dotenv').config({ path: path.join(__dirname, `.env.prod`) })
} else {
require('dotenv').config()
}
By definition on the Nuxt docs page what nuxt generate does is: Build the application and generate every route as a HTML file (used for static hosting).
Therefore, using proxy is out of question here. Take note that you path is not even being rewritten.
And probably the result you're looking for is not hosting.com/api/email/subscribe (wit /api), but hosting.com/email/subscribe.
Nevertheless, if you use nginx then I don't think you should use Nuxt's proxy option. Nginx is built just for that so point your API calls there and in nginx config file just declare where it should point further.
I need some assistance or at least to be pointed in the right direction. I am attempting to deploy a vuejs app using Vue CLI 3. When I run the build command the files are built into the dist folder, which works fine. There is also a js and css folder inside dist that contain the respective files. In my index.html is created the paths as /css/app.css or /js/app.js. I want the files to just be placed in the dist folder along with index.html and the paths to read simply app.css or app.js. My goal is to remove the /css/.
I am assuming this is accomplished in the vue.config.js by configuring webpack. I can’t seem to figure this out. I understand the baseURL setting but I can figure this part out..any help would be appreciated.
Thanks
it's answered here
https://github.com/vuejs/vue-cli/issues/1967
basically config should look like this
module.exports = {
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.tap(options => Object.assign({}, options, {
name: '[name].[ext]'
}));
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css',
},
},
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js',
}
}
};
I love the ability to dynamically import a chunk using the import command in webpack 3. Unfortunately it seems as if it can only be used if the resources are in a rather static directory configuration on the server.
In my environment the html pages generated dynamically in the backend (let's say http:/localhost/app). All other resources (js, css, images, etc.) are in a different directory (let's say http:/localhost/res) but additionally res is not static but can rather change dynamically in the backend.
As long as I do not use any dynamic imports everything works as expected but when trying to dynamically load any chunks this fails because webpack by default expects the chunks to be in http:/localhost/app and I cannot use publicPath because the url where the resources are is dynamic.
Is there any way to (runtime) configure webpack into loading the resources relative to the path where the current resource is located.
If for example the chunk page1.js located in http:/localhost/resA dynamically loads the chunk sub1.js he should look for it in http:/localhost/resA instead of http:/localhost/app.
generated html will be available at http:/localhost/app/page1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http:/localhost/resA/page1.bundle.js"></script>
</body>
</html>
file src/page1.js will be available as http:/localhost/resA/page1.bundle.js:
import(/* webpackChunkName: "sub1" */ './sub1').then(({MyClass}) => {/*...*/});
file src/sub1 will be available as http:/localhost/resA/sub1.bundle.js:
export class MyClass {};
file `webpack.config.js':
const path = require('path');
const webpack = require('webpack');
function config(env) {
return {
entry: {
index: ['./src/page1.js']
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: './'
},
module: {
rules: [
{
test: /\.js$/i,
include: /src/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
devtool: 'source-map'
};
}
module.exports = config;
The solution is to use __webpack_public_path__ as described in https://webpack.js.org/guides/public-path.