I am trying to understand how the tailwind.config.js file works.
I have a simple index.html file with tailwinds classes, and it works! But I don't understand how is it possible, because the content attribute from the tailwind.config.js is looking inside the ./src folder for the html templates, right?
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
fontFamily: {
sans: ["Graphik", "sans-serif"],
},
extend: {
colors: {
midnight: "#121063",
},
},
},
plugins: [],
}
For some reason it reads/detect the files in the root as well (outside the src folder), is there any reason for this? Thanks.
Project stucture
node_modules
index.html
package.json
tailwind.config.js
postcss.config
vite.config
src/
css/
js/
I see you are already using postcss. Here you define input CSS file and output file. The tailwindcss config file configures other things. With commands like for example: npm run build you build your application. Here the config files give the instructions on what to do.
Of course, you then use the output css in your index.html!
You can also just build the tailwindcss output file with an npx command.
npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css
Tailwind CSS works by scanning all HTML, JavaScript, and any other template files for class names, then generating all the corresponding CSS for those styles.
Consequently, the path ./src/**/*.{html,js} you defined in content means that any directory after src that contains html and js files of any name doesn't matter , TilwindCSS checks them.
Use * to match anything except slashes and hidden files
Use ** to match zero or more directories
Use comma separate values between {} to match against a list of options
For more information, refer to the following link:
https://tailwindcss.com/docs/content-configuration
I hope I was able to solve your problem
Related
Trying to get Tailwind to work via CLI instructions here. I've got a (simplified) file structure of
-public
-stylesheets
-styles.css
-tailwind.css
-views
-index
-index.pug
-page2.pug
-page3.pug
-user
-index.pug
-page2.pug
-includes
-templates
-header.pug
-footer.pug
I've followed the installation docs and a video on YouTube to try get it to work but when I set up tailwind.config.js with this :
module.exports = {
content: [
'/views/**/*.pug'
],
theme: {
extend: {},
},
plugins: [],
}
and try a simple test using Tailwind classes on index/index.pug like this :
extends ../index/layout
block content
h1.text-3xl
| Hello world!
and run npx tailwindcss -i ./public/stylesheets/tailwind.css -o ./public/stylesheets/styles.css --watch
I'm just getting a completely unformatted H1 on the frontend and a terminal warning of warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.. What am I doing wrong?
In your Tailwind config file, your template path is listed as '/views/**/*.pug'.
The specified path starts at the root of your filesystem and not relative to the folder you're running the command from.
Update the path to './views/**/*.pug'
I have a React project with webpack (own configuration), from which I need to generate different packages with different styles. It would always be the same application, only in each package it generates, it would need a particular css file to end up in the package.
For example, in the repository I would have different css files:
- src
- index.js
- index.html
- themes
- theme1
theme1.css
- theme2
theme2.css
- theme3
theme3.css
and when I build it should look like this: (in "build" folder)
- build
index.html
main.css // with the styles of theme2, for example
bundle.js
I don't know how to do this with webpack or which plugin, hope you help me.
Thanks
You can get multiple separate CSS by adding multiple entries in your configuration.
Example:
webpack.config.js
module.exports = {
entry: {
main: "./path/to/your_main.js",
"css-theme-1": "./path/to/your/theme.css",
"css-theme-2": "./path/to/your/another-theme.css",
}
}
Also, you can build it into a folder by configuring filename properties in mini-css-extract-plugin.
Further reading:
Webpack Code Splitting
I've installed tailwind using npm install tailwindcss
I then create my src/style.css file and include
`#tailwind base;`
`#tailwind components;`
`#tailwind utilities;`
When I run my build-css command I get a generated output.css file, but the file is only 425 lines long. It looks likes it's missing the components and the utilities. When I link my HTML to the output.css I get the base tailwind css styles applied, but utilities have absolutely no effect. I have followed the docs to the best of my ability as well as several tutorials with the same result every time. No clue what I am I doing wrong, the tuts I have watched show this file to be thousands of lines of code while mine is always 425.
You need to add a config js file for the tailwind engine, inside the config file use content attribute to define where is your HTML or JS files, the new engine automatically looks inside these files and compiles only the classes that you used.
Check this video for more information:https://youtu.be/mSC6GwizOag?t=22
If you believe you have set everything up properly, check that the structure of the project directory is correct:
project_directory/
|
|--- tailwind.config.js
|
|--- dist/
| |
| |--- output.css
|
|--- src/
|
|--- input.css
|
|--- index.html
|
|--- main.js
References
Cannot use tailwind classes
try this :
npx tailwindcss-cli#latest build ./src/styles.css -o ./public/styles.css
ps: the styles.css in the public folder is the output.css
It was my config file, I wasn't point to my source file correctly. Fixed this by coping the documentation's example and file structure. content: ["./src/**/*.{html,js}"], was what I needed to add to the tailwind.config.js
In my case, I had spaces in the file extensions that cause my problem
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}'],
//wrong content: ['./app/**/*.{js, ts, jsx, tsx}'],
theme: {
extend: {},
},
plugins: [],
};
Background
#angular-builders/custom-webpack allows us to customize the webpack config of angular build, tutorial here. I am using it to build the additional scripts for web extension (Chrome/Firefox).
Here is the extra.webpack.config.js that I have included in angular.json
const { resolve } = require('path');
const scriptsDir = __dirname;
module.exports = {
entry: {
"background-script": resolve(scriptsDir, 'background-script/boot.ts'),
"fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts')],
"site-bridge": resolve(scriptsDir, 'site-bridge/boot.ts')
}
};
As expected it outputs background-script.js, fill-manager.js and site-bridge.js alongside angular build artifacts. As this webpack config is merged with the angular's webpack config, we can control all the optimizations, hashing, source maps etc from a single angular.json file.
Problem
I also want to bundle additional css files that would be used with extension scripts and be controlled by angular build.
I might be able to add specific rules, loaders etc to extra.webpack.config.js but I do not want to deal with postcss, autoprefixer and sass loaders etc as its already being done inside angular.
Just like script files, simply adding css entry inside extra.webpack.config.js does not produce css file i.e.
module.exports = {
entry: {
...
"fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts'), resolve(scriptsDir, 'fill-manager/main.css')],
...
}
};
Is there a way where I can specify a css/scss file entry in extra.webpack.config.js and it just output a bundled css file using configuration based on angular?
I have a bootstrap.css file which I want to compile with my custom styles from style.sass into single output file, for example - style.css.
For sass compilation I use gruntjs with grunt-contrib-sass extension. My Gruntfile.js config for sass looks like this:
sass: {
dist: {
options: {
//style: 'compressed',
style: 'expanded',
lineNumbers: true
},
files: {
'build/styles/style.css': 'src/styles/style.sass'
}
}
}
I've tried to import bootstrap.css into sass file, but instead it only generates next code in output css (which is correct behavior http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import):
#import url(bootstrap.css);
.....
/*my style.sass rules*/
I even tried to list multiple files in order of concatination and processing, like in uglifier settings:
files: {
'build/styles/style.css': ['src/styles/bootstrap.css', 'src/styles/style.sass']
}
But this only adds bootstrap.css into final style.css file ignoring style.sass existence.
As I'm new in gruntjs, I can't figure out how this should be done properly.
The Grunt configuration is correct. The reason your file is not being imported is because of the way SASS is designed to work.
The SASS documentation states:
By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS #import rule:
If the file’s extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
Since the file you are importing has a .css extension it will therefore not be imported directly but remain a standard CSS #import.
You have three options to resolve this:
Rename the included file to _bootstrap.scss. (If you don't add the underscore a bootstrap.css will be created along with your main output file which is unnecessary.)
Include the Bootstrap SCSS source as a dependency of your project and build against that. Install the Bootstrap source using Bower by typing $ bower install bootstrap-sass-official in your project root folder. (For instructions on setting up Bower see the Bower website.) Then you can replace your import above with #import 'bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';.
Use a concatenation library such as grunt-contrib-concat to combine Bootstrap.css and your main style sheet during your build process.
This first option is fine if you downloaded the bootstrap CSS file into your project manually, however, if you are including it as a dependency with npm/bower it is not ideal.
I would recommend the second option since building Bootstrap from source will not only solve your problem but allow for customization of Bootstrap variables to fit your theme rather than overwriting them with subsequent style rules as well. The only downside is that your build process might be slightly longer due to the rather large SASS build of the Bootstrap source.