Quick start
Summary of commonly used command may look like this. For details on each command, see information below.
npx tailwindcss build tailwind.css -o style.css
npm install -D tailwindcss postcss autoprefixer vite
npx tailwindcss init -p
{
"name": "up-and-runing",
"version":"1.0",
"main": "index.js",
"scripts": {
"dev": "vite"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.4.4",
"tailwindcss": "^2.2.19",
"vite": "^2.6.14"
}
}
npm run dev
Official tailwind documentation
https://tailwindcss.com/docs There are Video tutorials and place where you can try directly in the browser playground.
https://play.tailwindcss.com/
Standard tailwind css 2.0 is also available in quick prototype tool
https://shuffle.dev/
Installation procedure
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
It caused me a warning.
npm WARN saveError ENOENT: no such file or directory, open '/Users/sergejdergatsjev/Documents/tailwind_getingstarted/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for tailwindcss@2.2.19: wanted: {"node":">=12.13.0"} (current: {"node":"10.15.3","npm":"6.14.8"})
npm WARN notsup Not compatible with your version of node/npm: tailwindcss@2.2.19
npm WARN notsup Unsupported engine for fs-extra@10.0.0: wanted: {"node":">=12"} (current: {"node":"10.15.3","npm":"6.14.8"})
npm WARN notsup Not compatible with your version of node/npm: fs-extra@10.0.0
npm WARN notsup Unsupported engine for postcss-nested@5.0.6: wanted: {"node":">=12.0"} (current: {"node":"10.15.3","npm":"6.14.8"})
npm WARN notsup Not compatible with your version of node/npm: postcss-nested@5.0.6
npm WARN enoent ENOENT: no such file or directory, open '/Users/sergejdergatsjev/Documents/tailwind_getingstarted/package.json'
npm WARN tailwind_getingstarted No description
npm WARN tailwind_getingstarted No repository field.
npm WARN tailwind_getingstarted No README data
npm WARN tailwind_getingstarted No license field.
So I need to upgrade
npm install -g npm@latest
Then run the previous command. What does it mean?
sudo npm install -g n
(node:33146) ExperimentalWarning: The fs.promises API is experimental
npm WARN npm npm does not support Node.js v10.15.3
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! Unexpected token =
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/sergejdergatsjev/.npm/_logs/2021-11-26T17_06_07_700Z-debug.log
Download and install it with the package manager.
Ok, this is now updated
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
up to date, audited 140 packages in 2s
21 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
npm notice
npm notice New patch version of npm available! 8.1.2 -> 8.1.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.4
npm notice Run npm install -g npm@8.1.4 to update!
npm notice
Now seems alright
But you have installed with this command many node modules.
I don't understand 100% what all this is needed for and should it be somewhere in a separate directory so in my case that's probably the wrong location.. Weird that in official documentation there is no information about this fact and it didn't say where to go to run these commands. Probably that comes naturally to someone who uses Node.js often. We rarely use it so it is not immediately obvious to me.
Now you need to create a configuration existing in a project directory.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
npx tailwindcss init
This will create a minimal tailwind.config.js file at the root of your project
Create a CSS file and use @ to include
@tailwind base;
@tailwind components;
@tailwind utilities;
If you’re already familiar with PostCSS you probably know what you need to do, if not refer to the documentation for the tool you are using.
I don't use any of your tools like React, Vue Js or anything like that
So we'll try PostCSS then..
npm install postcss-cli autoprefixer
npx postcss *.css --use autoprefixer -d build/
npx postcss -h
If you’d like to compile your CSS with Tailwind without integrating it directly into any sort of build tooling, you can use the Tailwind CLI tool to generate your CSS without configuring PostCSS or even installing Tailwind as a dependency if you don’t want to.
Whit command
npx tailwindcss -o tailwind.css
You can read more about tailwind in his not compiled file with comments..
This will create a file called tailwind.css generated based on Tailwind’s default configuration, and automatically add any necessary vendor prefixes using autoprefixer.
Now you can pull this file into your HTML just like any other stylesheet:
Or you can content of this file via include in Django project or static generator command commands.
Using a custom CSS file
If you’d like to process any custom CSS alongside the default styles Tailwind generates, create a CSS file wherever you normally would and use the @tailwind directive to include Tailwind’s base, components, and utilities styles:
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css
Use the -p flag if you’d like to also generate a basic postcss.config.js file alongside your tailwind.config.js file:
Theme
The theme section is where you define your color palette, fonts, type scale, border sizes, breakpoints — anything related to the visual design of your site.
See for example responsive design.
https://tailwindcss.com/docs/responsive-design
Plugins
The plugins section allows you to register plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants.
Building for production
When building for production, set NODE_ENV=production on the command line when building your CSS
NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css
This will make sure Tailwind removes any unused CSS for best performance. Read our separate guide on optimizing for production to learn more.
You can also use the --minify flag to compress your CSS with cssnano:
NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --minify
https://tailwindcss.com/docs/optimizing-for-production
Tailwindui
Very interesting library with clean design and beautiful components. Solid colors for each site. So, I don’t need to look for a good designer. You can use it and compile your own CSS using only the classes you are using.
Well integrated with VUE, which we occasionally use in web along with Lit. https://lit.dev/
So that can become a good alternative to our bootstrap hassle that we had to use for so long with a number of sites that Google has to index.
Here's a guy made interesting post about using it.
https://dval.dev/blog/lit-web-components-tutorial/
Example configuration files
Create a directory “tailwindcss or jstoolchain” in project app > create the below files inside created directory > run npm install inside this directory.
tailwind.config.js:
const colors = require('tailwindcss/colors')
module.exports = {
purge: {
enabled: true,
content: [
'../job/templates/job/viewjob.amp.html',
'../jobfor/templates/includes/menu_items_employer.amp.html',
'../jobfor/templates/includes/menu_items_candidate.amp.html'
]
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
"lime": colors.lime,
"primary": colors.teal["600"],
"primary-dark": colors.teal["700"],
"complementary": "#940d18",
"complementary-dark": "#770a15",
},
zIndex: {
"1001": "1001",
},
screens: {
'print': {'raw': 'print'},
// => @media print { ... }
}
},
},
variants: {
extend: {
display: ["group-hover"],
opacity: ['disabled'],
cursor: ['disabled'],
backgroundColor: ['disabled'],
},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting')(require('postcss-nesting')),
require('tailwindcss'),
require('autoprefixer'),
]
}
package.json
{
"scripts": {
"build": "NODE_ENV=production npx tailwindcss -i css/tailwind.css -o css/tailwind-output.css --postcss",
"build:production": "NODE_ENV=production npx tailwindcss -i css/tailwind.css -o ../job/templates/job/includes/viewjob_amp.min.css --minify --postcss --watch"
},
"dependencies": {
"autoprefixer": "^10.3.3",
"cross-env": "^7.0.3",
"postcss-cli": "^8.3.1",
"postcss-import": "^14.0.2",
"postcss-nested": "^5.0.6",
"postcss-nesting": "^8.0.1",
"sass": "^1.39.0",
"tailwindcss": "^2.2.9"
},
"devDependencies": {
"cssnano": "^5.0.8"
}
}
tailwind.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./main.scss";
Trouble shooting
npx tailwindcss -i input.css -o output.css
Stoped with Error: Cannot find module '@tailwindcss/forms'
const colors = require('tailwindcss/colors')
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {
colors: {
'warm-gray': colors.warmGray,
blue: colors.blue,
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}
Error: Cannot find module '@tailwindcss/forms'
If you run in “Cannot find module” error only thing that worked is to install manually each plugin via npm (following instructions from plugin githup page):
npm install @tailwindcss/typography
Comments
Post a Comment