Image
I've watched a few videos on how to set this up as well as went through the documentation. still having issues to where it compiles after the initial run of npm run build but further edits of the html file do not change in the browser. Also I've noticed it does not continue to rebuild in the terminal.
index.html
<link href="/dist/output.css" rel="stylesheet" />
input.css
#tailwind base;
#tailwind components;
#tailwind utilities;
package.json
{
"name": "tailwind",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.2.7"
}
}
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
Related
I don't know why but when I install Tailwind in my brand new empty Next.js project I get this error after running npm run dev.
ERROR
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use1!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use[2]!./styles/globals.css
/Users/andregomes/Desktop/Note/todo/tailwind.config.js:6
SyntaxError: Invalid or unexpected token
Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use1!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use[2]!./styles/globals.css
./styles/globals.css
The best answer I found for this issue was in this Next.js discussion thread, but I already checked and I don't use tailwindcss/nesting. I just followed the regular installation instructions for Next.js and Tailwind.
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},autoprefixer: {},
},
}
package.json
{
"name": "todo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#next/font": "13.1.3",
"eslint": "8.32.0",
"eslint-config-next": "13.1.3",
"next": "13.1.3",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4"
}
}
globals.css
#tailwind base;
#tailwind components;
#tailwind utilities;
Please try after removing line number 6 (blank line) from tailwind.config.js and do npm run dev again. must be some special character at line 6.
I have a Laravel 9 project and I want to use the Tailwind
When I put each component's css in some files to separate them, it cause an error message but if I put all together works.
Error message:
body.css #layer components is used but no matching #tailwind components directive is present.
app.css:
#import "tailwind.css";
#import "body.css";
tailwind.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
body.css:
#layer components {
.body {
#apply bg-sky-100
}
}
webpack.mix.js:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
// require('postcss-import'),
require("tailwindcss/nesting"),
require('autoprefixer'),
])
.webpackConfig({
stats: {
children: true,
},
})
;
tailwind.config.js:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
],
theme: {
extend: {},
},
plugins: [],
darkMode: 'class',
mode: "jit",
}
package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"autoprefixer": "10.4.7",
"axios": "^0.25",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4"
},
"dependencies": {
"postcss-import": "^14.1.0"
}
}
Why is this caused ?
According to tailwind-css docs
If you are writing a lot of CSS and organizing it into multiple files, make sure those files are combined into a single stylesheet before processing them with Tailwind, or you’ll see errors about using #layer without the corresponding #tailwind directive.
How to overcome this ?
Use postcss-import plugin.
//postcss.config.js
module.exports = {
plugins: {
'postcss-import': {}, 👈 Add this plugin
tailwindcss: {},
autoprefixer: {},
}
}
Please can anyone shed some light on how "Targets" work in Parcel, or at least how to separate unminified dev and minified prod files. The sparse documentation just raises further questions and no amount of Googling will find a solution. I am new to Parcel and to the modular nature of newer Javascript syntax.
This all started when I noticed that parcel watch does not minify/uglify the JS, and I don't want that to end up on the prod server. But parcel build WILL minify/uglify the JS. So it would be really swell if my start script could bundle files into build/wp-content/themes/yourproject/assets--dev and the build script could bundle files into build/wp-content/themes/yourproject/assets. That way I can put assets-dev in .gitignore and use those while building the site. Or is that even the proper way to acheive this? In Gulp you can just define different tasks or create one task to do both of these outputs, but I cannot find a way to do this in Parcel.
Description of the project - It's a WordPress site so I can't necessarily feed Parcel source html files to scan. Parcel is really just bundling JS and SCSS files, we are replacing our old Gulp setup. So in package.json, I have this (I'll explain what I have tried in "scripts" and in "targets" further down):
{
"name": "localtesting2",
"version": "1.0.0",
"description": "## Overview",
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel watch develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss --dist-dir ./build/wp-content/themes/yourproject/assets--dev",
"build": "parcel build develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss --dist-dir ./build/wp-content/themes/yourproject/assets"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"smoothscroll-polyfill": "^0.4.4"
},
"devDependencies": {
"#parcel/transformer-sass": "^2.3.2",
"autoprefixer": "^10.4.2",
"parcel": "latest",
"parcel-bundler": "^1.12.5",
"parcel-resolver-ignore": "^2.0.0",
"postcss": "^8.4.6",
"postcss-modules": "^4.3.0",
"sass": "^1.49.8",
"webfontloader": "^1.6.28"
},
"targets": {
"default": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"parcelIgnore": [
"images/*.*",
"webfonts/*.*"
]
}
The root of the project is like this:
build/
-- build/wp-admin
-- build/wp-content
-- etc all the WordPress core/theme files that will ultimately end up on the server
The dev directory looks like this, basically just holding the source code for JS and CSS that get compiled into the theme:
In "scripts" I have tried setting "start" and "build" both with and without the --dist-dir flag. And I remove the "targets" object from package.json when I try --dist-dir.
For "targets", I can't find clear documentation/examples on what exactly goes here so I just tried anything I could think of. I have tried all of the following but nothing works the way I am intending it to. Parcel picks either assets-dev or assets and compiles everything there, it won't separate the code. Sometimes it will just compile files into a dist folder, which I am not using.
"targets": {
"start": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"targets": {
"watch": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"targets": {
"default": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"targets": {
"dev": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"prod": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
Ultimately I am looking for how to get unminified assets into one folder that I can conditionally load, and minified assets into another folder that will get loaded on the prod server.
I figured it out. The CLI commands in the "scripts" portion of package.json can include the --target flag. This way you can name a target and then define it in the "targets" property. This is the working package.json:
{
"name": "localtesting2",
"version": "1.0.0",
"description": "## Overview",
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel watch develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss develop/styles/editor.scss --target default",
"build": "parcel build develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss develop/styles/editor.scss --target build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"smoothscroll-polyfill": "^0.4.4"
},
"devDependencies": {
"#parcel/transformer-sass": "^2.3.2",
"autoprefixer": "^10.4.2",
"parcel": "latest",
"parcel-bundler": "^1.12.5",
"parcel-resolver-ignore": "^2.0.0",
"postcss": "^8.4.6",
"postcss-modules": "^4.3.0",
"sass": "^1.49.8",
"webfontloader": "^1.6.28"
},
"targets": {
"default": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"parcelIgnore": [
"images/*.*",
"webfonts/*.*"
]
}
Still though there must be a better workflow for this, or maybe a way to get the watch command to minify everything like build does.
I'm using Vue 3 and trying to add tailwindcss into it from the following tutorial. https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm
I have installed the dependencies using the following command,
npm install -D tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
But when I tried to create the configuration files using the following command
npx tailwindcss init -p
It is giving me the following error.
npx: installed 83 in 5.2s Cannot find module 'autoprefixer' Require
stack:
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/build.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/index.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/main.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli.js
I don't know why autoprefixer is not detecting because I have already installed it.
Even the package.json have it.
{
"name": "wooclime",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"postcss": "^7.0.35",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Run:
npx tailwindcss-cli#latest init -p
Please uninstall run this command:
npm uninstall tailwindcss postcss autoprefixer
After this module is uninstall, please run this command:
npm install tailwindcss#latest postcss#latest autoprefixer#latest
I had the same problem when I ran the command with node version 14.15.0.
Apparently using node 15.5 solved it for me. I think there's a problem with npm or something.
You could use the following command using the tailwindcss cli with latest version an the flag --postcss or -p
npx tailwindcss-cli#latest init --postcss
Or follow these steps :
After installing that dependencies try to create the following files project root without running that command :
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Then in your main CSS file add :
#tailwind base;
#tailwind components;
#tailwind utilities;
I had same issue
I downgrade the tailwindcss package to 1.0.5 from latest
Now it is working
Following exactly the getting started guide on the webpack site I run into this error on build:
ERROR in ./src/index.js Module not found: Error: Can't resolve 'css-loader' in 'C:\Users\Dominik\Desktop\tutorial' # ./src/index.js
2:0-21 webpack.config.js
The css-loader is installed locally. It is registered in the package.json. What Im I doing wrong?
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
}
};
package.json
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.4.0",
"style-loader": "^1.1.1",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
index.js
import _ from "lodash";
import "./style.css";
function component() {
const element = document.createElement("div");
element.innerHTML = _.join(["Hello", "webpack"], " ");
element.classList.add("hello");
return element;
}
document.body.appendChild(component());
style.css
.hello {
color: red;
}
Try re-running npm install --save-dev css-loader. Can you see it in your node_modules folder?
EDIT
Uninstalling and re-installing the module fixed it:
npm remove css-loader && npm install --save-dev css-loader