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: [],
};
Related
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
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'
The content of style.css gets overridden eahc time I run npm run dev
This is my webpack file
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.styles(['resources/assets/style.css'], 'public/css/app.css');
Any way to append the css and not override it?
app is the default name taken by the webpack
So either change
.sass('resources/assets/sass/app.scss', 'public/css') -> .sass('resources/assets/sass/app.scss', 'public/css/newfile.css')
or
mix.styles(['resources/assets/style.css'], 'public/css/app.css') -> mix.styles(['resources/assets/style.css'], 'public/css/styles.css')
Edit: If you need everything in one file
mix.sass('resources/assets/sass/app.scss', 'public/css/app.css')
mix.styles(['public/css/app.css', 'resources/assets/style.css'], 'public/css/app.css')
Hope this helps
You don't need to change your webpack file.
In addition to importing .sass and .scss files, Sass can import plain old .css files. The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS #import.
Webpack
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Sass (resources/assets/sass/app.scss)
...
#import '../style.css';
Can we refer sass file instead of css file directly in the index.html?
If it is possible, how does the webpack compile sass into css file? Also, which is the best way to bundle the sass file while building the application?
I am using the following versions:
webpack(3.5.5), angular/cli(1.4.1) and angular4
My folder structure is like this,
src
├--- assets
| ├--- sass
| | ├--- common.scss
| | ├--- base.scss
| | ├--- coustom.scss
| ├--- css
| ├--- common.css
| ├--- base.css
| ├--- coustom.css
|
├--- index.html
├--- .angular-cli.json
First of all browser does not understand scss ot less. so you have to compile then and convert them to css while running in your browser.
As you are using angular cli there is a pretty sumple way to do that and no configuration required.
new cli project
so while generating you project you can pass a flag to tell cli to choose scss instead of css.
ng new projectname --style scss
existing project
If its an existing cli project you can edit .angular-cli.json file to change from css to scss.
first your style need to scss
"styles": [
"/asset/scss/common.scss",
"/asset/scss/base.scss",
"/asset/scss/custom.scss",
"/asset/scss/common.css",
"/asset/scss/base.css",
"/asset/scss/custom.css",
"styles.scss"
],
and the default style is scss
"defaults": {
"styleExt": "scss",
"component": {}
}
For external js libraries you you add a script block and add your scripts there. it will automatically added to your build.
"scripts": [
"../node_modules/jquery/dist/jquery.js"
],
Normally I use
{ test: /\.sass$/, loader: 'style!css!sass?indentedSyntax' }
and then in main.js
require('./styles.sass')
But it applies style using javascript when main.js is loaded. The problem is that my app us isomorphic and returns some html initially. Because I load main.js just before </body> tag, then styles are applied to document a bit too late (user sees not-styled HTML for a moment).
Therefore I would like to generate regular css file from styles.sass and then simply include id in <head></head> to make sure it is loaded initially. How I can generate regular css file?
I tried:
entry: {
styles: path.resolve(__dirname, 'app/styles.sass')
}
but it generates styles.js instead of .css file. Moreover if I include styles.js in a head then I get following error in console from styles.js:
Uncaught ReferenceError: webpackJsonp is not defined
Use the extract text plugin.
Put this in your loaders:
{ test: /\.scss$/, loader: ExtractTextPlugin.extract("css!sass") }
...and in your plugins:
plugins: [
new ExtractTextPlugin("styles.css")
]
Adapted from...
http://webpack.github.io/docs/stylesheets.html#separate-css-bundle
When I use Sass in my projects, I in most cases use the same file structure. At least when it comes to the css-folder.
├── index.html
├── /css
│ ├── style.css
│ ├── /sass
│ ├───── style.scss
│ ├───── ...
In the public folder where I tend to put my js, css and images folder, I always make a batch file. Something like this:
cd "`dirname "$0"`"
sudo sass --watch css/sass:css
This works for all my projects. I just run it and minimize the window. This looks for changes and converts Sass to regular css to the style.cssfile. Then in my index.html I just include css/style.css.
Hope this helps you