Re-add Tailwind CSS
This commit is contained in:
parent
0401e039de
commit
fd37030d03
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,2 +1,4 @@
|
||||||
|
/node_modules/
|
||||||
/output_*/
|
/output_*/
|
||||||
|
/source/build/
|
||||||
/vendor/
|
/vendor/
|
||||||
|
|
|
||||||
1
assets/css/base.pcss
Normal file
1
assets/css/base.pcss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
0
assets/css/components.pcss
Normal file
0
assets/css/components.pcss
Normal file
8
assets/css/tailwind.pcss
Normal file
8
assets/css/tailwind.pcss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@import 'tailwindcss/base';
|
||||||
|
@import 'tailwindcss/components';
|
||||||
|
@import 'tailwindcss/utilities';
|
||||||
|
|
||||||
|
@import './base.pcss';
|
||||||
|
@import './components.pcss';
|
||||||
|
@import './utilities.pcss';
|
||||||
|
|
||||||
0
assets/css/utilities.pcss
Normal file
0
assets/css/utilities.pcss
Normal file
22
assets/js/app.js
Normal file
22
assets/js/app.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import 'alpinejs'
|
||||||
|
import 'focus-visible'
|
||||||
|
import 'highlight.js/styles/github.css'
|
||||||
|
import 'styles/tailwind.pcss'
|
||||||
|
import bash from 'highlight.js/lib/languages/bash'
|
||||||
|
import hljs from 'highlight.js/lib/core'
|
||||||
|
import ini from 'highlight.js/lib/languages/ini'
|
||||||
|
import javascript from 'highlight.js/lib/languages/javascript'
|
||||||
|
import php from 'highlight.js/lib/languages/php'
|
||||||
|
import yaml from 'highlight.js/lib/languages/yaml'
|
||||||
|
|
||||||
|
hljs.registerLanguage('bash', bash);
|
||||||
|
hljs.registerLanguage('ini', ini);
|
||||||
|
hljs.registerLanguage('javascript', javascript);
|
||||||
|
hljs.registerLanguage('php', php);
|
||||||
|
hljs.registerLanguage('yaml', yaml);
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', event => {
|
||||||
|
document.querySelectorAll('pre code').forEach(block => {
|
||||||
|
hljs.highlightBlock(block)
|
||||||
|
})
|
||||||
|
})
|
||||||
9734
package-lock.json
generated
Normal file
9734
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
29
package.json
Normal file
29
package.json
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "npm run development",
|
||||||
|
"development": "encore dev",
|
||||||
|
"prod": "npm run production",
|
||||||
|
"production": "encore production",
|
||||||
|
"watch": "encore dev --watch"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@symfony/webpack-encore": "^1.1.2",
|
||||||
|
"@tailwindcss/aspect-ratio": "^0.2.0",
|
||||||
|
"@tailwindcss/forms": "^0.2.1",
|
||||||
|
"@tailwindcss/jit": "^0.1.1",
|
||||||
|
"@tailwindcss/typography": "^0.4.0",
|
||||||
|
"alpinejs": "^2.3.5",
|
||||||
|
"autoprefixer": "^10.2.5",
|
||||||
|
"elliptic": ">=6.5.3",
|
||||||
|
"focus-visible": "^5.1.0",
|
||||||
|
"highlight.js": "^10.4.1",
|
||||||
|
"lodash": ">=4.17.19",
|
||||||
|
"postcss": "^8.2.1",
|
||||||
|
"postcss-easy-import": "^3.0.0",
|
||||||
|
"postcss-loader": "^5.2.0",
|
||||||
|
"postcss-nested": "^5.0.5",
|
||||||
|
"tailwindcss": "^2.0.2",
|
||||||
|
"webpack-notifier": "^1.8.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
10
postcss.config.js
Normal file
10
postcss.config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
'postcss-easy-import': {
|
||||||
|
extensions: ['.css', '.pcss']
|
||||||
|
},
|
||||||
|
'@tailwindcss/jit': {},
|
||||||
|
'postcss-nested': {},
|
||||||
|
autoprefixer: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>{{ site.name|default('Sculpin Skeleton') }}</title>
|
<title>{{ site.name|default('Sculpin Skeleton') }}</title>
|
||||||
|
<link type="text/css" rel="stylesheet" href="/build/app.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% block body %}{% endblock %}
|
{% block body %}{% endblock %}
|
||||||
|
|
|
||||||
122
tailwind-colours.js
Normal file
122
tailwind-colours.js
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
module.exports = {
|
||||||
|
current: 'currentColor',
|
||||||
|
inherit: 'inherit',
|
||||||
|
transparent: 'transparent',
|
||||||
|
|
||||||
|
black: '#000',
|
||||||
|
white: '#fff',
|
||||||
|
|
||||||
|
gray: {
|
||||||
|
50: '#f9f9f9',
|
||||||
|
100: '#f5f5f5',
|
||||||
|
150: '#eee',
|
||||||
|
200: '#aaa',
|
||||||
|
300: '#e2e8f0',
|
||||||
|
400: '#cbd5e0',
|
||||||
|
500: '#a0aec0',
|
||||||
|
600: '#718096',
|
||||||
|
700: '#36393e',
|
||||||
|
750: '#2e3136',
|
||||||
|
800: '#1e2125',
|
||||||
|
900: '#18171b',
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
100: '#fff5f5',
|
||||||
|
200: '#fed7d7',
|
||||||
|
300: '#feb2b2',
|
||||||
|
400: '#fc8181',
|
||||||
|
500: '#f56565',
|
||||||
|
600: '#e53e3e',
|
||||||
|
700: '#c53030',
|
||||||
|
800: '#9b2c2c',
|
||||||
|
900: '#742a2a',
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
100: '#fffaf0',
|
||||||
|
200: '#feebc8',
|
||||||
|
300: '#fbd38d',
|
||||||
|
400: '#f6ad55',
|
||||||
|
500: '#ed8936',
|
||||||
|
600: '#dd6b20',
|
||||||
|
700: '#c05621',
|
||||||
|
800: '#9c4221',
|
||||||
|
900: '#7b341e',
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
100: '#fffff0',
|
||||||
|
200: '#fefcbf',
|
||||||
|
300: '#faf089',
|
||||||
|
400: '#f6e05e',
|
||||||
|
500: '#ecc94b',
|
||||||
|
600: '#d69e2e',
|
||||||
|
700: '#b7791f',
|
||||||
|
800: '#975a16',
|
||||||
|
900: '#744210',
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
100: '#f0fff4',
|
||||||
|
200: '#c6f6d5',
|
||||||
|
300: '#9ae6b4',
|
||||||
|
400: '#68d391',
|
||||||
|
500: '#48bb78',
|
||||||
|
600: '#38a169',
|
||||||
|
700: '#2f855a',
|
||||||
|
800: '#276749',
|
||||||
|
900: '#22543d',
|
||||||
|
},
|
||||||
|
teal: {
|
||||||
|
100: '#e6fffa',
|
||||||
|
200: '#b2f5ea',
|
||||||
|
300: '#81e6d9',
|
||||||
|
400: '#4fd1c5',
|
||||||
|
500: '#38b2ac',
|
||||||
|
600: '#319795',
|
||||||
|
700: '#2c7a7b',
|
||||||
|
800: '#285e61',
|
||||||
|
900: '#234e52',
|
||||||
|
},
|
||||||
|
blue: {
|
||||||
|
100: '#ebf8ff',
|
||||||
|
200: '#bee3f8',
|
||||||
|
300: '#90cdf4',
|
||||||
|
400: '#63b3ed',
|
||||||
|
500: '#4299e1',
|
||||||
|
600: '#3182ce',
|
||||||
|
700: '#2b6cb0',
|
||||||
|
800: '#2c5282',
|
||||||
|
900: '#2a4365',
|
||||||
|
},
|
||||||
|
indigo: {
|
||||||
|
100: '#ebf4ff',
|
||||||
|
200: '#c3dafe',
|
||||||
|
300: '#a3bffa',
|
||||||
|
400: '#7f9cf5',
|
||||||
|
500: '#667eea',
|
||||||
|
600: '#5a67d8',
|
||||||
|
700: '#4c51bf',
|
||||||
|
800: '#434190',
|
||||||
|
900: '#3c366b',
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
100: '#faf5ff',
|
||||||
|
200: '#e9d8fd',
|
||||||
|
300: '#d6bcfa',
|
||||||
|
400: '#b794f4',
|
||||||
|
500: '#9f7aea',
|
||||||
|
600: '#805ad5',
|
||||||
|
700: '#6b46c1',
|
||||||
|
800: '#553c9a',
|
||||||
|
900: '#44337a',
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
100: '#fff5f7',
|
||||||
|
200: '#fed7e2',
|
||||||
|
300: '#fbb6ce',
|
||||||
|
400: '#f687b3',
|
||||||
|
500: '#ed64a6',
|
||||||
|
600: '#d53f8c',
|
||||||
|
700: '#b83280',
|
||||||
|
800: '#97266d',
|
||||||
|
900: '#702459',
|
||||||
|
}
|
||||||
|
}
|
||||||
9
tailwind-plugin-focus-visible.js
Normal file
9
tailwind-plugin-focus-visible.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
const plugin = require('tailwindcss/plugin')
|
||||||
|
|
||||||
|
module.exports = plugin(function({ addVariant, e }) {
|
||||||
|
addVariant('focus-visible', ({ modifySelectors, separator }) => {
|
||||||
|
modifySelectors(({ className }) => {
|
||||||
|
return `.${e(`focus-visible${separator}${className}`)}[data-focus-visible-added]`
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
32
tailwind-safelist-classes.txt
Normal file
32
tailwind-safelist-classes.txt
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
bg-blue-600
|
||||||
|
bg-gray-200
|
||||||
|
block
|
||||||
|
block-opdavies-branding
|
||||||
|
border
|
||||||
|
border-gray
|
||||||
|
border-l-0
|
||||||
|
flex
|
||||||
|
flex-col
|
||||||
|
flex-none
|
||||||
|
italic
|
||||||
|
my-auto
|
||||||
|
p-3
|
||||||
|
pl-5
|
||||||
|
pr-6
|
||||||
|
py-3
|
||||||
|
rounded-full
|
||||||
|
rounded-l-full
|
||||||
|
rounded-r-full
|
||||||
|
sm:flex-row
|
||||||
|
sm:space-x-4
|
||||||
|
sm:space-y-0
|
||||||
|
space-x-3
|
||||||
|
space-y-3
|
||||||
|
space-y-4
|
||||||
|
text-center
|
||||||
|
text-sm
|
||||||
|
text-white
|
||||||
|
w-16
|
||||||
|
w-32
|
||||||
|
w-auto
|
||||||
|
w-full
|
||||||
104
tailwind.config.js
Normal file
104
tailwind.config.js
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
const aspectRatio = require('@tailwindcss/aspect-ratio')
|
||||||
|
const colors = require('./tailwind-colours')
|
||||||
|
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||||
|
const focusVisible = require('./tailwind-plugin-focus-visible')
|
||||||
|
const forms = require('@tailwindcss/forms')
|
||||||
|
const typography = require('@tailwindcss/typography')
|
||||||
|
const { fontFamily } = defaultTheme
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
darkMode: false,
|
||||||
|
important: true,
|
||||||
|
purge: {
|
||||||
|
content: [
|
||||||
|
'tailwind-safelist-classes.txt',
|
||||||
|
'source/**/*.{md,twig}',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
typography: (theme) => ({
|
||||||
|
DEFAULT: {
|
||||||
|
css: {
|
||||||
|
a: {
|
||||||
|
color: theme('colors.blue.700')
|
||||||
|
},
|
||||||
|
code: {
|
||||||
|
backgroundColor: theme('colors.gray.150'),
|
||||||
|
fontWeight: theme('fontWeight.normal'),
|
||||||
|
paddingBottom: theme('spacing.px'),
|
||||||
|
paddingLeft: theme('spacing.1'),
|
||||||
|
paddingRight: theme('spacing.1'),
|
||||||
|
paddingTop: theme('spacing.px')
|
||||||
|
},
|
||||||
|
h2: {
|
||||||
|
marginBottom: theme('spacing.2'),
|
||||||
|
marginTop: theme('spacing.8')
|
||||||
|
},
|
||||||
|
pre: {
|
||||||
|
backgroundColor: theme('colors.gray.150'),
|
||||||
|
borderRadius: '0',
|
||||||
|
color: theme('colors.gray.800'),
|
||||||
|
padding: theme('spacing.6')
|
||||||
|
},
|
||||||
|
'code::before': false,
|
||||||
|
'code::after': false,
|
||||||
|
'pre code::before': false,
|
||||||
|
'pre code::after': false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
css: {
|
||||||
|
color: theme('colors.gray.200'),
|
||||||
|
|
||||||
|
code: {
|
||||||
|
backgroundColor: theme('colors.gray.750'),
|
||||||
|
color: theme('colors.gray.200')
|
||||||
|
},
|
||||||
|
|
||||||
|
'blockquote, h2, h3': {
|
||||||
|
color: theme('colors.white')
|
||||||
|
},
|
||||||
|
|
||||||
|
strong: {
|
||||||
|
color: theme('colors.gray.200')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
colors,
|
||||||
|
fontFamily: {
|
||||||
|
sans: [
|
||||||
|
'Inter',
|
||||||
|
'Arial',
|
||||||
|
'Helvetica Neue',
|
||||||
|
'Helvetica',
|
||||||
|
'sans-serif',
|
||||||
|
],
|
||||||
|
mono: [
|
||||||
|
'Operator Mono',
|
||||||
|
'Roboto Mono',
|
||||||
|
...fontFamily.mono
|
||||||
|
]
|
||||||
|
},
|
||||||
|
spacing: {
|
||||||
|
'2px': '2px'
|
||||||
|
},
|
||||||
|
borderWidth: {
|
||||||
|
3: '3px'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
96: '24rem'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
corePlugins: {
|
||||||
|
container: false
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
aspectRatio,
|
||||||
|
focusVisible,
|
||||||
|
forms,
|
||||||
|
typography
|
||||||
|
]
|
||||||
|
}
|
||||||
27
webpack.config.js
Normal file
27
webpack.config.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
let Encore = require('@symfony/webpack-encore')
|
||||||
|
let path = require('path')
|
||||||
|
|
||||||
|
Encore
|
||||||
|
.disableSingleRuntimeChunk()
|
||||||
|
.cleanupOutputBeforeBuild()
|
||||||
|
.setOutputPath('source/build/')
|
||||||
|
.setPublicPath('/build')
|
||||||
|
.setManifestKeyPrefix('build/')
|
||||||
|
|
||||||
|
.addEntry('app', '@/app.js')
|
||||||
|
|
||||||
|
.enablePostCssLoader()
|
||||||
|
|
||||||
|
.addAliases({
|
||||||
|
'@': path.resolve(__dirname, 'assets', 'js'),
|
||||||
|
styles: path.resolve(__dirname, 'assets', 'css')
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!Encore.isProduction()) {
|
||||||
|
Encore.enableSourceMaps()
|
||||||
|
}
|
||||||
|
|
||||||
|
process.env.NODE_ENV =
|
||||||
|
process.env.NODE_ENV || Encore.isProduction() ? 'production' : 'development';
|
||||||
|
|
||||||
|
module.exports = Encore.getWebpackConfig()
|
||||||
Loading…
Reference in a new issue