Add and configure Tailwind CSS
Add and configure Tailwind CSS within the project, including adding npm scripts for compiling the CSS, configuring purge settings, and adding the `cssnano` library for minifying the CSS (which is run for production builds).
This commit is contained in:
parent
cdb0e67eb3
commit
cb79277374
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,3 +1,5 @@
|
||||||
|
/node_modules/
|
||||||
|
/public/build/
|
||||||
|
|
||||||
###> symfony/framework-bundle ###
|
###> symfony/framework-bundle ###
|
||||||
/.env.local
|
/.env.local
|
||||||
|
|
|
||||||
11
README.rst
11
README.rst
|
|
@ -9,3 +9,14 @@ Run the following command to start a local web server. Going to that URL in your
|
||||||
.. code::
|
.. code::
|
||||||
|
|
||||||
php -S 127.0.0.1:8000 -t public
|
php -S 127.0.0.1:8000 -t public
|
||||||
|
|
||||||
|
Building the CSS
|
||||||
|
================
|
||||||
|
|
||||||
|
The CSS is generated from ``assets/css/tailwind.pcss`` and is compiled using ``postcss-cli``.
|
||||||
|
|
||||||
|
To simplify the process, there are some custom npm scripts added in ``package.json`` that can be used to compile the CSS:
|
||||||
|
|
||||||
|
- ``yarn dev`` - generate the development CSS which is un-purged and un-minified.
|
||||||
|
- ``yarn prod`` - generate the production CSS which is purged and minified.
|
||||||
|
- ``yarn watch`` - generate the development CSS, but re-generate automatically when the source file is changed.
|
||||||
|
|
|
||||||
3
assets/css/tailwind.pcss
Normal file
3
assets/css/tailwind.pcss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
19
package.json
Normal file
19
package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"config": {
|
||||||
|
"inputFile": "assets/css/tailwind.pcss",
|
||||||
|
"outputFile": "public/build/tailwind.css"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "cross-env NODE_ENV=development postcss $npm_package_config_inputFile -o $npm_package_config_outputFile",
|
||||||
|
"prod": "cross-env NODE_ENV=production postcss $npm_package_config_inputFile -o $npm_package_config_outputFile",
|
||||||
|
"watch": "cross-env NODE_ENV=development postcss $npm_package_config_inputFile -o $npm_package_config_outputFile --watch"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"cssnano": "^4.1.10",
|
||||||
|
"postcss": "^8.2.1",
|
||||||
|
"postcss-cli": "^8.3.1",
|
||||||
|
"tailwindcss": "^2.0.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
8
postcss.config.js
Normal file
8
postcss.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('tailwindcss'),
|
||||||
|
...process.env.NODE_ENV === 'production'
|
||||||
|
? [require('cssnano')]
|
||||||
|
: []
|
||||||
|
]
|
||||||
|
}
|
||||||
13
tailwind.config.js
Normal file
13
tailwind.config.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
module.exports = {
|
||||||
|
purge: {
|
||||||
|
content: ['templates/**/*.twig']
|
||||||
|
},
|
||||||
|
darkMode: false, // or 'media' or 'class'
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>{% block title %}Florida DrupalCamp{% endblock %}</title>
|
<title>{% block title %}Florida DrupalCamp{% endblock %}</title>
|
||||||
|
<link rel="stylesheet" href="/build/tailwind.css"/>
|
||||||
{% block stylesheets %}{% endblock %}
|
{% block stylesheets %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue