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!
Related
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
I am working on a Vue + Nuxt + Tailwind project and using the marked library to convert a text into markdown.
The issue is that some styles like "Headings" and "Link" are loading properly, while some basic styles like "bold", "italics" are working fine.
For example:
When I use "*hello* world", it gets converted to "hello world".
When I use "# hello world", it does not increase the size of the text.
When I use "[google](https://google.com)", it does create a link, but the link is not blue colored.
Not sure what the issue is here. If any more details are required, please let me know.
Its because of the tailwind.css
in tailwind, h1 - h6 headers dont work.
Option 1)
add this to your tailwind.config.js:
module.exports = {
corePlugins: {
preflight: false,
},
....
}
source :https://github.com/tailwindlabs/tailwindcss/issues/1460
Option 2)Try adding custom css for h1..h6 in your css file.
https://www.w3schools.com/tags/tag_hn.asp copy the styles from here
Similarly try add custom css for other issues.
The solution to this was using Tailwind CSS's typography plugin.
Here are the steps to be followed:
Install the plugin first.
Using npm
npm install #tailwindcss/typography
Using Yarn
yarn add #tailwindcss/typography.
Then add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('#tailwindcss/typography'),
// ...
],
}
Then add the prose class to the element where you are displaying the markdown.
<div class="prose" v-html="cleanedMarkdown"></div>.
This provided the needed formatting for the markdown.
I am using VuePress version:
"devDependencies": {
"vuepress": "^2.0.0-beta.26"
}
and I can't add a simple .vue component to my .md page.
My Github LINK
Tried out the other solutions here, but nothing seems to help:
Solution1
Solution2
I was following the guide from the official VuePress documentation about components. But all I get is a zero size component (no content shown)
Would really appreciate any solutions.
EDIT:
to make it a bit simpler than to check my github. The whole project contains anyway only 2 files.
So what I did, is to make a new component.vue file in .vuepress/components:
<template>
<h1>Hello from my test component</h1>
</template>
<script>
export default {}
</script>
<style></style>
and am trying to add it in my README.md file:
# Hello VuePress
### test component
<TestComponent />
<kebab-case-test-component />
Screenshot for my folder tree:
From the VuePress 1.x to 2.x migration docs:
.vuepress/components/
Files in this directory will not be registered as Vue components automatically.
You need to use #vuepress/plugin-register-components, or register your components manually in .vuepress/clientAppEnhance.{js,ts}.
To configure auto component registration:
Install the #vuepress/plugin-register-components plugin:
npm i -D #vuepress/plugin-register-components#next
Add .vuepress/config.js with the following contents:
const { path } = require('#vuepress/utils')
module.exports = {
plugins: [
[
'#vuepress/register-components',
{
componentsDir: path.resolve(__dirname, './components'),
},
],
],
}
demo
I want to import a SCSS file in my Nuxt project.
For this I tried to follow the documentation where I simply add the path with filename in css file as:
nuxt.config.js
css: ['#/scss/_introPage.scss]
But it gives error as
Cannot find module '../scss/_introPage.scss'
My folder structure:
> components
> pages
> scss > _introPage.scss
> static
> store
> test
> nuxt.config.js
> package.json
How can I include the SCSS file and apply the global CSS into my project?
If anyone needs any further information please let me know.
Thank you everyone for your input.
I had to install sass, sass-loader#10 and fibers for it to work.
nom install --save-dev sass sass-loader#10 fibers
Nuxt.js provides a good way to share global CSS files with a css option in nuxt.config.js
example:
// nuxt.config.js
export default {
// other options
css: [
// Load a Node.js module directly (here it's a Sass file)
'bulma',
// CSS file in the project
'#/assets/css/main.css',
// SCSS file in the project
'#/assets/css/main.scss'
],
// other options
}
in your case, you need to add sass and sass-loader to load sass, scss, less &... files in your projects.
SASS: yarn add sass-loader sass
LESS: yarn add less-loader less
Stylus: yarn add stylus-loader stylus
to share your global style files(scss, sass, & ... ) and other good features
you can use Nuxt Style Resources.
Share variables, mixins, functions across all style files (no #import
needed)
Add #nuxtjs/style-resources dependency using yarn or npm to your project with on of these commands:
yarn add -D #nuxtjs/style-resources or npm install --save-dev #nuxtjs/style-resources
and then you can add '#nuxtjs/style-resources' in buildModules option in nuxt.config.js file import your global scss files like this:
// nuxt.config.js
export default {
// other options
buildModules: [
'#nuxtjs/style-resources',
],
styleResources: {
// your settings here
scss: ['#/assets/scss/_introPage.scss'],
sass: [],
less: [],
stylus: [],
hoistUseStatements: true // Hoists the "#use" imports. Applies only
to "sass", "scss" and "less". Default: false.
}
// other options
}
for more information see this link https://www.npmjs.com/package/#nuxtjs/style-resources
I have a simple project generated with vue-cli. When I run the vue-cli-service build command it produces CSS file correctly. When I run the vue-cli-service build --watch command it only builds JavaScript files. There are no CSS files.
How can I generate CSS files in watch mode?
You can achieve this by adding this line of code in your vue.config.js
//vue.config.js
module.exports = {
//adding extract css true solves this issue
css: {
extract: true
}
}
https://cli.vuejs.org/config/#css-extract
There is a good chance that you have to use an extract plugin for webpack.
I know that in my vue.config.js file I'm using :
chainWebpack: config => {
if (config.plugins.has('extract-css')) {
const extractCSSPlugin = config.plugin('extract-css');
extractCSSPlugin &&
extractCSSPlugin.tap(() => [
{
filename: 'build.css',
chunkFilename: 'build.css'
}
]);
}
}
Hopefully this help you. However vue inject your css in watch mode right at the top of your file for automatic re-rendering purpose I think.