TailwindCSS: Issue with Project Root Directory when Configuring tailwindcss.config.js - tailwind-css

Tailwindcss documentation states that files in the content
section of tailwind.config.js are resolved relative to the
"project root" directory.
My question is, what does "project root" directory refers to?
the directory containing tailwindcss.config.js?
the directory containing package.json? (a project can have multiple of those)
the root git directory( directory containing.git )?
the current working directory of the tailwindcss command?
That is, the directory where the command is invoked in.
the directory containing the actual binary of tailwindcss CLI?
Update
Okay, if I am not mistaken the working directory of tailwindcss is treated as the project root directory.
For example, if your project layout is something like this:
./my-project
|_ src
| |_ index.html
|_ tailwind.config.js
And, tailwindcss is invoked from the root of your project like this:
cd ./myproject
tailwindcss --config tailwind.config.js [other options]
Then, your tailwind.config.js should be configured as:
module.exports = {
content: ["./src/index.html"],
};
However, if we switch into the src directory and call tailwindcss:
cd ./myproject/src
tailwindcss --config tailwind.config.js [other options]
Then, tailwind.config.js should read something like this:
module.exports = {
content: ["./index.html"],
};

Related

Next lint not working on files anywhere other than the ones inside the pages folder

I have a FRESHLY installed NextJS app with TypeScript. I am using Next V12, when I run yarn lint, it runs next lint and shows no errors.
And now when I add an extra rule in the .eslintrc file like "no-unused-vars": 2 (it means to show an error when there's an un-used variable), and add an un-used variable on purpose in my index.tsx file inside the pages folder so that I can test the linting, it works as expected.
But when I add another folder called hooks and add an index.tsx file with unused variables in it, it doesn't capture the unused variable error in hooks folder, only captures the ones inside pages folder.
My .eslintrc file looks like this -
{
"extends": "next/core-web-vitals",
"rules": {
"no-unused-vars": 2
}
}
If anyone faced this issue before and knows what I'm doing wrong, please suggest.
According to the docs, next lint runs ESLint for files in the following folders: pages, components, and lib.
To run ESLint for other folders as well, you have to use the --dir flag.
You can either do so directly in the terminal:
yarn run lint -- --dir . //for all folders in your project root directory
yarn run lint -- --dir pages hooks //only for the folders "pages" and "hooks"
Or change the lint script in package.json:
{
...
"scripts": {
...
"lint": "next lint --dir ." //or "next lint --dir pages hooks"
...
}
...
}
Note that the above is for development mode.
For production mode, you can add the dirs option to eslint in next.config.js:
module.exports = {
eslint: {
dirs: ['.'] //or ['pages', 'hooks']
}
}

How to create tailwind.config.js in custom directory instead of root folder with init command

I am using below npx command to generate tailwind.config.js file, it is creating this file in root directory by default. I want to create it in custom /config folder. Could anyone please guide me.
Also wanted to know what all changes are needed for tailwind to work with config residing in custom folder.
npx tailwindcss init
Thanks in advance.
init command may accept one of these flags - -f to create full tailwind config and -p to create it with additional postcss.config.js. You may change directory and create config file there - not sure is it good for you or not
cd config && npx tailwindcss init
Every path within your config file is relative so pay attention at content section. Also your compiler as well must have correct path to config file, for example require('tailwindcss')('./config/tailwind.config.js') - but it depends in a way you compile styles

Moving Pages folder in Next.js application to src folder

In a create-next-app Next.js application, I want to move the pages folder in the root directory to a src folder. I added a jsconfig.json with the code (below), however now I get the error message "404 | This page could not be found." Anyone have any insight? (Sorry beginner to web development)
{
"compilerOptions": {
"baseUrl": "src"
}
}
Nextjs by default supports moving /pages to src/ folder.
Create a /src folder in the root directory.
Delete the /.next folder
Move /pages to the /src folder
Remember package.json, .gitignore and other config files needs to be in the root directory and should not be moved to the /src folder.
Once that is done just run the command $ npm run dev or $ yarn dev , so you can view it on your localhost.
More: https://nextjs.org/docs/advanced-features/src-directory
In case you are using NextJS + TailwindCSS, you need to change the following in tailwind.config.js after moving files under the src directory:
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
...
...
You need to stop the server and then do npm run dev. That solved my problem when I moved things into the src directory and started getting 404 pages.
content: [
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',
],
replace above in case of src
As #Thierry mentioned in the comments, according to the docs "Pages can also be added under src/pages as an alternative to the root pages directory. The src directory is very common in many apps and Next.js supports it by default."
So, src/pages will be ignored if pages is present in the root directory.
More at the official docs: https://nextjs.org/docs/advanced-features/src-directory
src/pages will be ignored if pages is present in the root directory
Update tsconfig.json (if you use Typescript)
"paths": {
"#/*": ["./src/*"]
}
Reload npm run dev

Sass "Error: Can't find stylesheet to import."

I'm running into an issue which seems similar to the one reported in https://github.com/sass/dart-sass/issues/284, but doesn't seem 'fixed' for me. I'm trying to follow the workflow described in https://getbootstrap.com/docs/4.1/getting-started/theming/ to import Bootstrap's SCSS source code.
Here is my (simplified) directory structure:
.
├── index.html
├── node_modules
│   ├── #mdi
│   └── bootstrap
├── package-lock.json
├── package.json
├── scss
│   └── peek-solutions2.scss
└── stylesheets
└── peek-solutions.css
I've installed Bootstrap using npm install bootstrap; my package.json contains the following dependencies:
{
"dependencies": {
"#mdi/font": "^2.2.43",
"bootstrap": "^4.1.1"
}
}
In peek-solutions2.scss, I've added the following line:
#import "../node_modules/bootstrap/scss/bootstrap";
I've tried the sass --watch command specifying input and output files in different directories (cf. https://sass-lang.com/guide), but I run into an import error:
Kurts-MacBook-Pro:peek-solutions2 kurtpeek$ sass --watch scss/peek-solutions2.scss:stylesheets/peek-solutions2.css
Error: Can't find stylesheet to import.
#import "functions";
^^^^^^^^^^^
../node_modules/bootstrap/scss/bootstrap.scss 8:9 #import
scss/peek-solutions2.scss 1:9 root stylesheet
Sass is watching for changes. Press Ctrl-C to stop.
It seems like this is a path issue; _functions.scss is in the same directory as bootstrap.scss in node_modules/bootstrap/scss, but it seems like the sass command is expecting it to be in my custom scss directory. How can I fix this?
just delete the dots in the beginning , you must write:
#import "node_modules/bootstrap/scss/bootstrap";
in your scss file
This happened to me because I was running ng build --prod within a folder other than the root project folder, and every other css import breaks.
The solution is to cd to the root folder.
I solved it by using an extra forward slash #import "//abstracts/variable";
I solved this issue by pointing the imports to the files directly, i.e:
#import 'style/components/palette';
to
#import 'style/components/_palette.scss';
For those using the sass NPM package and have their own NodeJS build script, make sure that you provide loadPaths as an options parameter in your compile or compileAsync method. For example:
import sass from 'sass';
// const sass = require('sass');
const build = async () => {
await sass.compileAsync('./src/index.scss',
{
sourceMap: true,
style: 'expanded',
loadPaths: ['./src']
}
);
};
Here ./src is where your main scss file resides, relative to your project directory. You might not need this configuration if the index file is in project root, but most people probably don't put their scss files there.
I finally worked around this problem by using Grunt instead of sass to compile and watch the SCSS files. After running npm install grunt --save-dev, npm install grunt-contrib-sass --save-dev, and npm install grunt-contrib-watch --save-dev, I added the following Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: { // Task
dist: { // Target
files: { // Dictionary of files
'stylesheets/main.css': 'scss/main.scss', // 'destination': 'source'
}
}
},
watch: {
scripts: {
files: ['**/*.scss'],
tasks: ['sass'],
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
Now if I run grunt watch, whenever I save scss/main.scss it gets compiled into stylesheets/main.css:
Kurts-MacBook-Pro:peek-solutions2 kurtpeek$ grunt watch
Running "watch" task
Waiting...
>> File "scss/main.scss" changed.
Running "sass:dist" (sass) task
Done.
Completed in 1.720s at Sun Jul 01 2018 14:41:11 GMT-0700 (PDT) - Waiting...
I installed the bootstrap old version which didn't add scss folder in bootstrap under my node module, so I uninstalled my bootstrap by the command npm uninstall bootstrap and installed it back by npm i bootstrap.
If, for example your index.scss file is in a directory called 'sass' e.g.
├── node_modules
├── sass
│   └── index.scss
then you should use this file path:
#import "../node_modules/bootstrap/scss/bootstrap";
I also got this error and I solved it just using the relative path, like this:
#import '../../node_modules/bootstrap/scss/bootstrap';
If you're using rails and trying to get production to work, you may have run the production command to build assets in your dev environment. For instance:
yarn build:css
or
sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules
Either way, Rails may be preferring the "built" assets over the dev ones. So you may already have fixed the issue with bootstrap and not know it! Remove your build directory:
rm -rf app/assets/builds
and your other asset files will be used.
I faced this issue in Laravel 9. Remove this symbol. ~
// Bootstrap
#import "bootstrap/scss/bootstrap";
In peek-solutions2.scss, remove the previous code and add this:
#import "node_modules/bootstrap/scss/bootstrap";
According to this github issue:
Dart Sass's command-line interface doesn't look for imports in any location that's not explicitly provided as a --load-path on the command line. Node Sass's CLI may behave differently.
Thus to get the a similar behaviour with node-sass use --load-path.
sass --load-path=./ src/scss/styles.scss dist/css/styles.css
This command will load the current dir and will resolve ./node_modules or a possible ./src.
I fixed this issue with updating sass version from 1.26.10 to 1.32.13.
Check where Bootstrap is in node_modules and add
#import "../node_modules/bootstrap/scss/bootstrap";
for it.
Try #import "~bootstrap/scss/bootstrap.scss";,
no forward slash after the tilde.
It can be routing issues, if you are on rails use this
#import "../../../node_modules/bootstrap/scss/bootstrap";
#import '../../../node_modules/bootstrap-icons/font/bootstrap-icons';
In my case, it was caused by the fact that my project was opened in a parent folder
root ⬅️ my vscode had this folder as a root
└── project ⬅️ should have been in this folder instead
├── node_modules
├── src
├── static
└── ...
In my case, I had a symlink to my C:\dev folder when the physical location was actually E:\dev. Changing directories from C:\dev\project to E:\dev\project and running the mix command fixed this for me
If you're using Aurelia, WebPack and SASS and you did an NPM install of bootstrap the import will be:
#import "../../node_modules/bootstrap/scss/bootstrap";
You simply need to cd into the root of your project folder. Two scenarios:
If you're deep inside the project, you need to run cd .. in the command line until you are in the root.
If you're outside of the project, you need to run cd [insert root folder here] and run your build again.

Place scss .map file in different folder in Intellij IDEA

I have a styles folder in my project. Inside it I have the following folders: css, scss, css-maps. I want the following: when I update a scss file in scss folder, I want it to create/update a css file with the same name in css folder and *.css.map file in css-maps folder.
|styles
|css
my-style.css
|css-maps
my-style.css.map
|scss
my-style.scss
I defined a SCSS watcher in my Intellij. It has the following settings:
Arguments: --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css --no-cache --update $FileName$:../css-maps/$FileNameWithoutExtension$.css.map
Working directory: $FileDir$
Output paths to refresh: ../css/$FileNameWithoutExtension$.css:../css-maps/$FileNameWithoutExtension$.css.map
The problem is that it still outputs my-style.css.map to my css folder (and CSS file points to this map file), while in my css-maps folder it puts 2 files: my-style.css.map which looks exactly like the .css output file, and my-style.css.map.map. Yes, with double .map extension.
How can this be fixed?
Here is configuration I'm using, hope it will help:
Arguments: --sourcemap=none --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css

Resources